/* 遊園地の乗り物のボタン（項目 194「乗る時のボタンがクソ。乗ったら降りるボタンは右下につけて」）。
   見た目は項目 196 の画面（css/style.css：墨の板・白い字・黄緑 --volt と紅 --hot・斜めに切った板 --para/--cham）にそろえ、このクラスにまとめる：
   .ride-go＝止める所で止まると出る「乗る」（乗り物の記号・名前・乗る）・.ride-exit＝乗っている時の「降りる」（右下）・.ride-view＝視点の切り替え（降りるの上）・
   .ride-lines＝速い時の風の線・.ride-fade＝乗り降りの切り替え。動きは transform と opacity だけ */
.ride-go {
  position: absolute; left: 50%; bottom: calc(100px + var(--sab)); translate: -50% 0; z-index: 3; pointer-events: auto; /* 速さの表示（下の真ん中）の上 */
  display: flex; align-items: center; gap: 14px; min-height: 76px; min-width: 236px; padding: 10px 34px 10px 18px; border: 0;
  background: var(--volt); color: var(--ink); clip-path: var(--para); font-weight: 900; text-align: left;
  animation: ride-go-in .3s var(--ease);
}
.ride-go:active { transform: translateX(3px) scale(.98); }
.ride-go .ride-ico { flex: none; width: 56px; height: 54px; background: var(--ink); color: var(--volt); display: grid; place-items: center; clip-path: var(--para); }
.ride-go .ride-ico .i { width: 32px; height: 32px; }
.ride-go .ride-txt { display: grid; row-gap: 2px; } /* 字の範囲（字体の上下の余白込み）が重ならない行の高さ（画面の数の検査 lay.js） */
.ride-go .ride-txt small { font-size: 13px; font-weight: 900; line-height: 1.5; white-space: nowrap; }
.ride-go .ride-txt b { font-family: var(--disp); font-weight: 400; font-size: 26px; line-height: 1.5; letter-spacing: .04em; white-space: nowrap; }
.ride-go::after { content: ''; position: absolute; top: 0; bottom: 0; left: -40%; width: 26%; background: rgba(255, 255, 255, .45); transform: skewX(-18deg) translateX(0); animation: ride-go-sheen 1.8s var(--ease) .3s infinite; pointer-events: none; }
@keyframes ride-go-in { from { opacity: 0; transform: translateX(48px) skewX(-10deg); } to { opacity: 1; transform: none; } }
@keyframes ride-go-sheen { 0% { transform: skewX(-18deg) translateX(0); } 60%, 100% { transform: skewX(-18deg) translateX(620%); } }
/* 縦持ち：ハンドルとペダルと速さの表示の上（右手の親指が届く高さ） */
@media (max-aspect-ratio: 1/1) { body.touch .ride-go { bottom: calc(246px + var(--sab)); } } /* 速さの表示（左下・下から 164〜235px）の上 */

.ride-exit, .ride-view { position: fixed; z-index: 30; display: grid; place-items: center; align-content: center; gap: 4px; padding: 0; border: 0; font-weight: 900; touch-action: manipulation; }
.ride-exit { right: calc(16px + var(--sar)); bottom: calc(16px + var(--sab)); width: 104px; height: 96px; background: var(--hot); color: var(--ink); clip-path: var(--cham); }
.ride-exit .i { width: 34px; height: 34px; }
.ride-exit b { font-size: 16px; line-height: 1; }
.ride-view { right: calc(26px + var(--sar)); bottom: calc(124px + var(--sab)); width: 84px; height: 62px; background: rgba(11, 13, 18, .86); color: #fff; clip-path: var(--para); }
.ride-view .i { width: 24px; height: 24px; color: var(--volt); }
.ride-view b { font-size: 12px; line-height: 1; }
.ride-exit:active, .ride-view:active { transform: translateX(3px) scale(.97); }

.ride-lines { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; }
.ride-fade { position: fixed; inset: 0; z-index: 25; background: var(--ink); opacity: 0; pointer-events: none; }