/* P1-17 アプリらしい操作感：下タブバー・画面遷移アニメ */

/* body を縦のflexにして（style.css）、その最後の行としてここに置く。
   position:fixed で浮かせると、iOS のホーム画面アプリで中身が画面上部に
   二重に描かれたり、画面の下端とずれた位置に置かれることがある（実機で発生）。
   ふつうの行にしてしまえば、そもそもズレようがない。 */
#tabbar {
  position: relative; z-index: 900; flex: 0 0 auto;
  display: flex; align-items: stretch;
  background: #151929;
  border-top: 1px solid #262c48;
  padding-bottom: env(safe-area-inset-bottom);
}
#tabbar.hidden { display: none !important; }

/* style.css の button{width:100%;margin-top:18px} を打ち消す */
#tabbar button {
  flex: 1 1 0; width: auto; margin: 0;
  background: none; border: none; border-radius: 0;
  color: var(--muted); font-weight: 600; font-size: .68rem; line-height: 1;
  letter-spacing: .01em;
  padding: 9px 2px 8px;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
}
#tabbar button:active { transform: none; background: rgba(255, 255, 255, .05); }
/* 絵文字はOSごとに色も余白も違って揃わないので、線画のSVGで統一する
   （currentColor なので選択中は文字と同じ色に変わる） */
#tabbar .ic { display: block; width: 25px; height: 25px; }
#tabbar button.on { color: var(--accent); }
#tabbar button.on .ic { stroke-width: 2.2; }

/* タブバーが本文に重ならなくなったので、下端の逃げ（style.css の safe-area 分）は
   タブバー側が持つ。本文はふつうの余白に戻す。 */
body.has-tabbar .content { padding-bottom: 18px; }
body.easy.has-tabbar .content { padding-bottom: 22px; }

/* ---------- 画面遷移 ---------- */
/* 進む＝右から、戻る＝左から、タブの切り替え＝下から軽く。
   横方向の animation で横スクロールバーが出ないよう #app を切っておく。 */
#app { overflow-x: hidden; }
@keyframes ns-fwd  { from { opacity: 0; transform: translateX(26px); }  to { opacity: 1; transform: none; } }
@keyframes ns-back { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } }
@keyframes ns-same { from { opacity: 0; transform: translateY(8px); }   to { opacity: 1; transform: none; } }
.nav-fwd  { animation: ns-fwd  .19s cubic-bezier(.22, .61, .36, 1) both; }
.nav-back { animation: ns-back .19s cubic-bezier(.22, .61, .36, 1) both; }
.nav-same { animation: ns-same .15s ease-out both; }

@media (prefers-reduced-motion: reduce) {
  .nav-fwd, .nav-back, .nav-same { animation: none; }
}