/* ---------- ぐるぐる電車くん ----------
 * アプリのアイコンと同じ電車の顔。回している間だけ、駅名パネルが空けている
 * 場所（円の右側）に出てきて、目をぐるぐる回す。止まると駅名と入れ替わりに消える。
 * 位置は .detail と同じ枠（--detail-left の右側）に合わせてあるので、
 * パネルの場所を変えるときは両方を一緒に動かすこと。 */
.tk {
  position: absolute;
  top: 50%;
  right: 0;
  width: calc(100% - var(--detail-left, 142px));
  display: flex;
  justify-content: center;
  /* 出入りは駅名パネルと同じ「ふわっと寄ってくる」動き（.detail と対の演出） */
  transform: translateY(-50%) scale(0.82);
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.2);
  z-index: 4;
  pointer-events: none; /* 上を通っても掴んで回せる（.grab-ring にゆずる） */
}
.tk.show { opacity: 1; transform: translateY(-50%) scale(1); }
/* 狭い画面では枠いっぱいまで広げない（左に伸びてくる駅名ラベルのぶんを残す）。
   この箱の幅＝電車くんの幅で、train.js が offsetWidth で測って使う
   （svg 要素には offsetWidth が無いので箱で包んでいる） */
.tk .tk-in { width: min(124px, 86%); }
.tk svg {
  width: 100%;
  height: auto;
  display: block;
  /* 行き先表示の「？」はページの書体を借りる */
  font-family: inherit;
}
/* 電車くんが出ている間だけ、駅名ラベルは電車くんの手前で「…」に丸める。
   長い駅名（サッポロビール庭園など）が車体の陰で文字の途中から
   ぶつ切りになると壊れて見えるため。幅は train.js が測って入れる */
.reel.tk-on .wdot .dlabel {
  max-width: var(--tk-label-max, none);
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 車体の色。帯・窓は今の路線の色を着る（applyTheme が入れる変数）。
   セレクタを .tk の中に閉じないのは、車体が共有パーツ（#tkBody）にあって
   .tk の外にいるため。<use> で写した先にも、ここの指定がそのまま効く */
.tk-shell { fill: var(--card); stroke: #E4E4DC; stroke-width: 3; }
.tk-band { fill: var(--line-color, #5E8F1E); }
.tk-glass { fill: var(--tk-glass, #DFF2C4); }
.tk-eyeball { fill: #fff; }
.tk-swirl { fill: none; stroke: #33421A; stroke-width: 9; stroke-linecap: round; }
.tk-pupil { fill: #33421A; }   /* 小さい版の丸い瞳（渦巻きをほどいた目） */
.tk-cheek { fill: #FFB3AE; }
.tk-mouth { fill: none; stroke: #33421A; stroke-width: 11; stroke-linecap: round; }
.tk-light { fill: #FFD24D; }
.tk-sign { fill: #33421A; }
.tk-signtext { fill: #FFD24D; font-size: 27px; font-weight: bold; }
/* 共有パーツの置き場所。絵としては出さないが、display:none にはしない
   （<use> で写せなくなる環境があるため、0×0 にして畳んでおく） */
.tk-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ふわふわ上下（車体ぜんぶ）。transform を持たない <g> なので素直に効く。
   14 は絵の座標での量で、画面上ではおよそ 5px。
   上がる量を変えるときは index.html の viewBox の上端も一緒に空けること
   （足りないと、いちばん上まで跳ねたときに頭が切れる） */
@keyframes tk-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}
.tk .tk-bob { animation: tk-bob 1.7s ease-in-out infinite; }

/* 目のぐるぐる。transform-origin に頼らず、目の位置への移動を
   キーフレームに書き込んで「その場で回す」（SVGの原点ずれを避ける） */
@keyframes tk-eye-l {
  from { transform: translate(184px, 205px) rotate(0deg); }
  to   { transform: translate(184px, 205px) rotate(360deg); }
}
@keyframes tk-eye-r {
  from { transform: translate(328px, 205px) rotate(0deg); }
  to   { transform: translate(328px, 205px) rotate(360deg); }
}
.tk .tk-eye-l { transform: translate(184px, 205px); animation: tk-eye-l 1.1s linear infinite; }
.tk .tk-eye-r { transform: translate(328px, 205px); animation: tk-eye-r 1.1s linear infinite; }

/* ---------- 回すボタンのうしろの電車くん ----------
 * 駅が決まると、出発ボタンのうしろにちょこんと降りてきて頭だけ出す。
 * 押すと乗って出発する（＝円のほうに、ぐるぐる目の大きい子が現れる）。
 * 出し入れは js/train.js（tkPeekIn / tkPeekOut）。
 *
 * 絵は viewBox で頭だけ切り出してある（80 90 352 200）。切り口はボタンに
 * 隠れる前提なので、下の重なり（bottom）を減らすと切れ端が覗く。
 * 頭が出るのはカードの上の余白（24px）の中——はみ出す量を増やすときは、
 * カードの padding も一緒に見ること。 */
.spin-wrap { position: relative; flex: none; display: flex; }
.spin-wrap .spin-btn { position: relative; z-index: 1; } /* 電車くんより手前に置く */
.tk-peek {
  position: absolute;
  left: 50%;
  bottom: 34px;          /* ボタンの上端から 4px ぶん、うしろに潜り込ませる */
  width: 40px;
  margin-left: -20px;    /* 幅の半分。translateX は着地アニメで使うので空けておく */
  z-index: 0;
  pointer-events: none;  /* 押すのはボタン。電車くんは当たり判定を持たない */
  opacity: 0;
}
.tk-peek svg { width: 100%; height: auto; display: block; }
/* 小さく置くので、車体の輪郭は太めにしないと消える（40pxで0.3px→0.8px） */
.tk-peek .tk-shell { stroke-width: 7; }
/* 出入りの向きは「下」で揃えてある。回している大きい子はカードの下（円のほう）に
   いるので、押すとこの子はボタンのうしろへ沈んで降りていき、駅に着くと下から
   上がってくる——ひと続きの動きに見えるように。
   沈む先はボタンの裏（22px下げれば頭が完全に隠れる寸法）。 */
@keyframes tk-peek-in {
  0%   { transform: translateY(22px); opacity: 0; }
  35%  { opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}
@keyframes tk-peek-out {
  0%   { transform: translateY(0); opacity: 1; }
  70%  { transform: translateY(15px); opacity: 1; }
  100% { transform: translateY(22px); opacity: 0; }
}
/* 待っているあいだの、ゆっくりした息づかい（顔の出る量がわずかに変わる） */
@keyframes tk-peek-idle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1.5px); }
}
/* 上がってくるほうは、行きすぎて戻るイージング（easeOutBack）でひょこっと弾ませる。
   降りるほうは加速して沈む。待ちの息づかいは、上がりきってから始める */
.tk-peek.in {
  opacity: 1;
  animation: tk-peek-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.18s both,
             tk-peek-idle 3s ease-in-out 0.75s infinite;
}
.tk-peek.out { animation: tk-peek-out 0.32s cubic-bezier(0.5, 0, 0.85, 0.4) both; }

/* 動きを控えたい人には、渦巻き目のまま静かに立ってもらう（出入りも寄らずに薄く）。
   ボタンのうしろの子も、跳ねずにその場にいるだけにする */
@media (prefers-reduced-motion: reduce) {
  .tk .tk-bob, .tk .tk-eye-l, .tk .tk-eye-r { animation: none; }
  .tk, .tk.show { transform: translateY(-50%); transition: opacity 0.3s ease; }
  .tk-peek.in { animation: none; }
  .tk-peek.out { animation: none; opacity: 0; }
}