:root{--bg:#0b0e0f;--panel:#0f1214;--ink:#eaecec;--shadow:rgba(0,0,0,.35)}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--ink);font-family:system-ui,"Noto Sans JP",sans-serif}
.stage{position:fixed; inset:0; display:grid; grid-template-rows: 1fr auto}
#imageWrap{position:relative; overflow:hidden; background:#000}
#img{width:100%; height:100%; object-fit:contain; object-position:50% 0%}
#cap{padding:12px 14px; text-align:center; background:rgba(0,0,0,.5); color:#fff}
#bottomTap{position:fixed; left:0; right:0; bottom:0; height:22%; z-index:5}
/* Simplified NAV */
#nav{position:fixed; left:0; right:0; bottom:-140px; background:rgba(12,14,15,.96); border-top:1px solid rgba(255,255,255,.08);
     box-shadow:0 -16px 44px var(--shadow); transition:bottom .22s ease; padding:10px 12px; display:grid; gap:10px}
#nav.is-open{bottom:0}
.row{display:flex; align-items:center; justify-content:center; gap:10px}
.badge{font-size:12px; color:#cfd6d6; background:rgba(0,0,0,.25); padding:4px 8px; border-radius:10px}
input[type="range"]{appearance:none; width:62vw; max-width:460px; height:14px; border-radius:12px; background:#1b2123;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06)}
button.icon{appearance:none; border:none; background:#1b2123; color:#e5ecec; padding:8px 10px; border-radius:12px}
button.icon:active{transform:translateY(1px)}
#vol{width:38vw; max-width:260px}

 /* 既存のスタイルはそのまま */

/* 画像切替の瞬間だけ効く、短いフェード＆2pxスライド */
.img-swap { animation: imgSwap .22s ease; }

@keyframes imgSwap {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 動きを抑制する環境では無効化 */
@media (prefers-reduced-motion: reduce){
  .img-swap { animation: none; }
}