/* ==========================================================
   電車で降りそうな人の前に立つゲーム
   ========================================================== */

:root {
  --ink: #2b2f38;
  --sub: #6d747f;
  --accent: #f0663c;
  --seat: #5d7fc4;
  --seat-dark: #4a68a8;
  --floor: #d8d2c5;
  --wall: #fbf6ec;
  /* 乗客1人ぶんの基準サイズ。JS が画面に合わせて更新する */
  --pu: 11px;
}

* , *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

body {
  font-family: "Hiragino Maru Gothic ProN", "Hiragino Sans", "Yu Gothic",
    "Noto Sans JP", "Meiryo", system-ui, sans-serif;
  color: var(--ink);
  background: #e6ecf4;
  background-image: radial-gradient(circle at 50% 0%, #f3f7fc 0%, #dde5f0 60%, #ccd7e6 100%);
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

.app {
  position: relative;
  width: 100%;
  max-width: 520px;
  height: 100dvh;
  margin: 0 auto;
  padding: calc(6px + env(safe-area-inset-top)) 10px calc(8px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* ---------- ヘッダー ---------- */

.hud {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.title {
  flex: 1;
  margin: 0;
  font-size: clamp(13px, 3.9vw, 18px);
  font-weight: 800;
  line-height: 1.2;
  color: #3c4452;
}

.br-sp { display: none; }

.streak {
  flex: none;
  background: #fff;
  border: 2px solid #c9d2e0;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: clamp(11px, 3.2vw, 14px);
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 2px 0 #c9d2e0;
}

.streak span { color: var(--accent); font-size: 1.15em; }
.streak.bump { animation: streakBump .45s ease; }

@keyframes streakBump {
  0% { transform: scale(1); }
  40% { transform: scale(1.18) rotate(-2deg); }
  100% { transform: scale(1); }
}

/* ---------- お題 ---------- */

.prompt {
  min-height: 2.3em;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: clamp(16px, 5.1vw, 25px);
  font-weight: 900;
  line-height: 1.16;
  letter-spacing: -.01em;
  text-wrap: balance;
  padding: 0 6px;
}

.prompt.flash { animation: promptIn .35s ease; }

@keyframes promptIn {
  0% { opacity: 0; transform: translateY(6px) scale(.96); }
  100% { opacity: 1; transform: none; }
}

.meter {
  height: 6px;
  border-radius: 999px;
  background: #ffffffaa;
  overflow: hidden;
  box-shadow: inset 0 1px 2px #0002;
}

.meter-bar {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffb03a, var(--accent));
}

.station {
  align-self: center;
  background: #2b2f38;
  color: #fff;
  border-radius: 999px;
  padding: 3px 14px;
  font-size: clamp(12px, 3.6vw, 16px);
  font-weight: 800;
  letter-spacing: .04em;
}

.station span { color: #ffd166; }

/* ---------- 車両 ---------- */

.car {
  position: relative;
  flex: 1;
  min-height: 0;
  border-radius: 18px;
  overflow: hidden;
  background: var(--wall);
  border: 3px solid #b9c1cd;
  box-shadow: 0 8px 18px #0000001f, inset 0 0 0 3px #fff;
}

.car-inner {
  position: absolute;
  inset: 0;
  font-size: var(--pu);
  display: flex;
  flex-direction: column;
}

.upper {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* 中吊り広告 */

.ceiling {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 2.2em;
  flex: none;
  height: 5.8em;
  padding-top: 1.5em;
}

.ad {
  width: 8.4em;
  height: 4.4em;
  background: #fff;
  border: .18em solid #ded6c6;
  border-radius: .3em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: .92em;
  font-weight: 800;
  line-height: 1.1;
  color: #9aa3b0;
  transform-origin: 50% -1.4em;
  animation: sway 4.2s ease-in-out infinite;
  box-shadow: 0 .2em .3em #00000010;
}

.ad::before { /* 吊り下げ */
  content: "";
  position: absolute;
  top: -1.3em;
  width: .16em;
  height: 1.3em;
  background: #cfc6b4;
}

.ad { position: relative; }
.ad-next b { font-size: 1.5em; color: var(--ink); }
.ad-plain { gap: .35em; animation-delay: -1.6s; }
.ad-plain span {
  width: 5.4em;
  height: .5em;
  border-radius: .25em;
  background: #e8e4da;
}
.ad-plain span:nth-child(2) { width: 4em; }
.ad-plain span:nth-child(3) { width: 4.8em; background: #f0d9cf; }

/* 窓 */

.windows {
  flex: 1;
  min-height: 5.5em;
  display: flex;
  gap: 1em;
  padding: .4em 3.6em .2em;
}

.window {
  flex: 1;
  border-radius: .4em;
  border: .28em solid #e3dccb;
  background: linear-gradient(#bfe0f2, #eaf6fb);
  overflow: hidden;
  box-shadow: inset 0 -.25em 0 #ffffffaa;
}

.scenery {
  width: 300%;
  height: 100%;
  background:
    repeating-linear-gradient(90deg,
      transparent 0 .5em,
      #a9c6d8 .5em 1.2em,
      transparent 1.2em 1.9em,
      #c3dae7 1.9em 2.9em,
      transparent 2.9em 3.9em);
  background-position: bottom;
  background-size: auto 64%;
  background-repeat: repeat-x;
  animation: scroll 1.6s linear infinite;
}

@keyframes scroll { to { transform: translateX(-33.33%); } }

.car.slowing .scenery { animation-duration: 5s; }
.car.stopped .scenery { animation-play-state: paused; }

/* つり革 */

.straps {
  flex: none;
  height: 3.4em;
  display: flex;
  justify-content: space-around;
  padding: 0 3.6em;
}

.strap {
  width: .22em;
  height: 68%;
  background: #cbb99a;
  border-radius: .2em;
  position: relative;
  transform-origin: 50% 0;
  animation: sway 3.2s ease-in-out infinite;
}

.strap:nth-child(2n) { animation-delay: -.7s; }
.strap:nth-child(3n) { animation-delay: -1.5s; }

.strap::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1.2em;
  transform: translateX(-50%);
  width: 1.3em;
  height: 1.3em;
  border: .25em solid #e0a33f;
  border-radius: .35em;
}

@keyframes sway {
  0%, 100% { transform: rotate(-3.5deg); }
  50% { transform: rotate(3.5deg); }
}

.car.braking .strap { animation: brakeSway 1.1s ease-in-out infinite; }

@keyframes brakeSway {
  0% { transform: rotate(-2deg); }
  35% { transform: rotate(13deg); }
  70% { transform: rotate(-9deg); }
  100% { transform: rotate(-2deg); }
}

/* 座席 */

.seat-area {
  position: relative;
  flex: none;
  padding: 0 3.5em;
}

.seat-back {
  position: absolute;
  left: 1.6em;
  right: 1.6em;
  bottom: 3.1em;
  height: 4.4em;
  border-radius: .8em .8em .3em .3em;
  background: linear-gradient(#7d9ad4, var(--seat));
  box-shadow: inset 0 .4em 0 #ffffff33;
}

.seat-base {
  position: absolute;
  left: .8em;
  right: .8em;
  bottom: 1.1em;
  height: 2.1em;
  border-radius: .5em .5em .35em .35em;
  background: linear-gradient(var(--seat), var(--seat-dark));
  box-shadow: 0 .25em 0 #3c568c, inset 0 .25em 0 #ffffff2e;
}

.passengers {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

/* ---------- 乗客 ---------- */

.passenger {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.passenger .label {
  font-size: .95em;
  font-weight: 800;
  line-height: 1;
  margin-bottom: .25em;
  padding: .28em .4em;
  border-radius: .5em;
  background: #ffffffe0;
  border: 1px solid #0000001a;
  white-space: nowrap;
  position: relative;
  z-index: 7;
}

.bubble {
  position: absolute;
  bottom: calc(100% + .25em);
  top: auto;
  left: 50%;
  transform: translate(-50%, 4px) scale(.85);
  z-index: 12;
  background: #2b2f38;
  color: #fff;
  font-size: .9em;
  font-weight: 800;
  line-height: 1;
  padding: .38em .45em;
  border-radius: .5em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}

.bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -.3em;
  transform: translateX(-50%);
  border: .3em solid transparent;
  border-top-color: #2b2f38;
  border-bottom: 0;
}

.bubble.show { opacity: 1; transform: translate(-50%, 0) scale(1); }

.person-wrap {
  position: relative;
  transition: transform .9s cubic-bezier(.5,.05,.7,.4), opacity .9s ease;
}

.person {
  position: relative;
  width: 4.55em;
  height: 11.2em;
  animation: breathe 3.4s ease-in-out infinite;
}

@keyframes breathe {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-.12em); }
}

/* 頭部 */

.head {
  position: absolute;
  top: 1.1em;
  left: 50%;
  margin-left: -1.5em;
  width: 3em;
  height: 2.95em;
  border-radius: 46% 46% 44% 44%;
  background: var(--skin, #f7d9bd);
  border: .16em solid #00000018;
  transition: transform .4s ease;
  z-index: 3;
  overflow: visible;
}

.eye, .mouth, .blush, .glasses, .earphone { z-index: 4; }

.ear {
  position: absolute;
  top: 1.25em;
  width: .48em;
  height: .68em;
  border-radius: 50%;
  background: var(--skin, #f7d9bd);
}
.ear.l { left: -.28em; }
.ear.r { right: -.28em; }

.eye {
  position: absolute;
  top: 1.42em;
  width: .36em;
  height: .44em;
  border-radius: 50%;
  background: #2b2f38;
  transition: transform .2s ease;
}
.eye.l { left: .72em; }
.eye.r { right: .72em; }

.mouth {
  position: absolute;
  top: 2.15em;
  left: 50%;
  margin-left: -.3em;
  width: .6em;
  height: .18em;
  border-radius: .2em;
  background: #00000055;
}

.blush {
  position: absolute;
  top: 1.85em;
  width: .5em;
  height: .3em;
  border-radius: 50%;
  background: #ff9c9c66;
}
.blush.l { left: .35em; }
.blush.r { right: .35em; }

/* 髪型 */

.hair {
  position: absolute;
  left: -.16em;
  right: -.16em;
  top: -.16em;
  height: 1.45em;
  border-radius: 46% 46% 30% 30%;
  background: var(--hair, #3b3230);
}

.hair.long::before, .hair.long::after {
  content: "";
  position: absolute;
  top: .7em;
  width: .7em;
  height: 2.2em;
  border-radius: .4em;
  background: var(--hair, #3b3230);
}
.hair.long::before { left: -.1em; }
.hair.long::after { right: -.1em; }

.hair.bun::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -.7em;
  transform: translateX(-50%);
  width: 1.15em;
  height: 1.15em;
  border-radius: 50%;
  background: var(--hair, #3b3230);
}

.hair.bald {
  height: .8em;
  border-radius: 46% 46% 0 0;
  background: transparent;
  box-shadow: inset 0 -.2em 0 #00000012;
}
.hair.bald::before, .hair.bald::after {
  content: "";
  position: absolute;
  top: .95em;
  width: .68em;
  height: .8em;
  border-radius: 40%;
  background: var(--hair, #8d8378);
}
.hair.bald::before { left: -.05em; }
.hair.bald::after { right: -.05em; }

.hair.cap {
  height: 1.3em;
  border-radius: 48% 48% 20% 20%;
  background: var(--hair, #d9534f);
}
.hair.cap::after {
  content: "";
  position: absolute;
  left: -.3em;
  bottom: -.3em;
  width: 3em;
  height: .45em;
  border-radius: .3em;
  background: var(--hair, #d9534f);
  filter: brightness(.88);
}

.hair.hood {
  left: -.4em;
  right: -.4em;
  height: 1.25em;
  border-radius: 50% 50% 18% 18%;
  background: var(--hood-color, #7e8a97);
}
.hair.hood::before {
  content: "";
  position: absolute;
  left: .45em;
  right: .45em;
  top: .35em;
  height: .85em;
  border-radius: 40% 40% 20% 20%;
  background: var(--hair, #3b3230);
  z-index: 1;
}

.hair.ponytail::before {
  content: "";
  position: absolute;
  right: -.35em;
  top: .55em;
  width: .7em;
  height: 1.7em;
  border-radius: .5em;
  background: var(--hair, #3b3230);
  transform-origin: top center;
  animation: tailSway 3s ease-in-out infinite;
}

@keyframes tailSway {
  0%, 100% { transform: rotate(6deg); }
  50% { transform: rotate(14deg); }
}

.glasses {
  position: absolute;
  top: 1.18em;
  left: .45em;
  right: .45em;
  height: .85em;
  border-top: .13em solid #444a55;
  z-index: 4;
}
.glasses::before, .glasses::after {
  content: "";
  position: absolute;
  top: 0;
  width: .9em;
  height: .8em;
  border: .13em solid #444a55;
  border-radius: 50%;
  background: #ffffff40;
}
.glasses::before { left: -.15em; }
.glasses::after { right: -.15em; }

/* イヤホン */

.earphone {
  position: absolute;
  top: 1.4em;
  width: .42em;
  height: .42em;
  border-radius: 50%;
  background: #f4f4f6;
  border: .1em solid #c7c9d1;
  z-index: 5;
  transition: transform .45s ease, opacity .45s ease;
}
.earphone.l { left: -.32em; }
.earphone.r { right: -.32em; }
.earphone::after {
  content: "";
  position: absolute;
  left: 50%;
  top: .3em;
  width: .12em;
  height: 1.5em;
  background: #e2e3e8;
  transform: translateX(-50%);
}

.earphone-off .earphone {
  transform: translateY(1.6em) rotate(25deg);
  opacity: 0;
}

/* 胴体 */

.torso {
  position: absolute;
  top: 3.8em;
  left: 50%;
  margin-left: -1.75em;
  width: 3.5em;
  height: 4em;
  border-radius: 1.4em 1.4em .5em .5em;
  background: var(--cloth, #4d6b9a);
  z-index: 2;
}

.collar {
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -.85em;
  width: 1.7em;
  height: 1em;
  background: #fff;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.tie {
  position: absolute;
  top: .55em;
  left: 50%;
  margin-left: -.25em;
  width: .5em;
  height: 1.6em;
  background: var(--tie, #c0392b);
  clip-path: polygon(50% 0, 100% 30%, 50% 100%, 0 30%);
}

.scarf {
  position: absolute;
  top: -.15em;
  left: 50%;
  margin-left: -1.4em;
  width: 2.8em;
  height: .9em;
  border-radius: .5em;
  background: var(--tie, #e07a5f);
}

.arm {
  position: absolute;
  top: .45em;
  width: .95em;
  height: 3em;
  border-radius: .5em;
  background: var(--cloth, #4d6b9a);
  filter: brightness(.94);
  transform-origin: 50% .5em;
  transition: transform .4s ease;
  z-index: 3;
}
.arm.l { left: -.65em; }
.arm.r { right: -.65em; }

.arm::after { /* 手 */
  content: "";
  position: absolute;
  left: 50%;
  bottom: -.25em;
  transform: translateX(-50%);
  width: .78em;
  height: .78em;
  border-radius: 50%;
  background: var(--skin, #f7d9bd);
}

/* 脚 */

.lap {
  position: absolute;
  top: 7.3em;
  left: 50%;
  margin-left: -2.15em;
  width: 4.3em;
  height: 1.5em;
  border-radius: .6em .6em .35em .35em;
  background: var(--pants, #3d4450);
  z-index: 4;
  transition: transform .45s ease;
}

.shin {
  position: absolute;
  top: 8.55em;
  width: 1.15em;
  height: 2.1em;
  border-radius: .2em .2em .3em .3em;
  background: var(--pants, #3d4450);
  filter: brightness(.9);
  z-index: 3;
  transition: height .45s ease, transform .45s ease;
}
.shin.l { left: 1.05em; }
.shin.r { right: 1.05em; }

.shin::after { /* 靴 */
  content: "";
  position: absolute;
  left: -.18em;
  bottom: -.1em;
  width: 1.5em;
  height: .55em;
  border-radius: .3em .35em .2em .2em;
  background: #39393f;
}

/* 持ち物 */

.prop { position: absolute; z-index: 5; }

.phone {
  top: 5.1em;
  left: 50%;
  margin-left: -.55em;
  width: 1.1em;
  height: 1.7em;
  border-radius: .22em;
  background: #2f3440;
  border: .1em solid #1c2029;
  box-shadow: inset 0 0 0 .1em #7fd4ff66;
  opacity: 0;
  transform: translateY(1.4em) scale(.7);
  transition: transform .45s ease, opacity .45s ease;
}

.phone-out .phone { opacity: 1; transform: none; }
.phone-out .arm { transform: rotate(-16deg) translateY(-.15em); }
.phone-out .arm.r { transform: rotate(16deg) translateY(-.15em); }

.book {
  top: 5em;
  left: 50%;
  margin-left: -1.5em;
  width: 3em;
  height: 2.1em;
  display: flex;
  transform-origin: 50% 60%;
  transition: transform .5s ease;
}
.book i {
  flex: 1;
  background: #fdfbf4;
  border: .12em solid var(--book, #b6553f);
  transition: transform .5s ease;
}
.book i:first-child { border-radius: .25em 0 0 .3em; border-right: 0; transform-origin: right center; }
.book i:last-child { border-radius: 0 .25em .3em 0; border-left: 0; transform-origin: left center; }

.book-closed .book { transform: rotate(-8deg) translateY(.35em) scale(.92); }
.book-closed .book i:first-child { transform: rotateY(74deg); background: var(--book, #b6553f); }
.book-closed .book i:last-child { transform: rotateY(-74deg); background: var(--book, #b6553f); }
.book-open .arm { transform: rotate(-14deg); }
.book-open .arm.r { transform: rotate(14deg); }

.bag {
  top: 7.5em;
  left: 50%;
  margin-left: -1.2em;
  width: 2.4em;
  height: 1.8em;
  border-radius: .25em .25em .35em .35em;
  background: var(--bag, #8a6a4f);
  box-shadow: inset 0 -.3em 0 #00000022;
  transition: transform .45s cubic-bezier(.3,1.4,.5,1);
  z-index: 6;
}
.bag::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -.8em;
  transform: translateX(-50%);
  width: 1.4em;
  height: 1em;
  border: .18em solid var(--bag, #8a6a4f);
  border-bottom: 0;
  border-radius: .7em .7em 0 0;
}

.bag-lap .bag { transform: translateY(-1.1em) scale(1.02); }

/* 寝る */

.zzz {
  position: absolute;
  top: .1em;
  right: 0;
  font-size: 1.15em;
  font-weight: 900;
  color: #7f8aa0;
  opacity: 0;
  z-index: 7;
}

.sleeping .zzz { opacity: 1; animation: zzz 1.8s ease-in-out infinite; }

@keyframes zzz {
  0% { transform: translate(0, .3em) scale(.7); opacity: 0; }
  40% { opacity: 1; }
  100% { transform: translate(.5em, -1.1em) scale(1.15); opacity: 0; }
}

.sleeping .head { transform: rotate(9deg) translateY(.2em); }
.sleeping .eye { transform: scaleY(.12); }
.sleeping .mouth { width: .35em; }

/* 仕草アニメーション */

.act-window .head { animation: lookWindow 1.9s ease; }
@keyframes lookWindow {
  0%, 100% { transform: none; }
  25%, 75% { transform: rotate(-12deg) translate(-.3em, -.15em); }
}

.act-watch .arm.l { animation: checkWatch 1.5s ease; }
@keyframes checkWatch {
  0%, 100% { transform: none; }
  25%, 70% { transform: rotate(-58deg) translate(.2em, -.1em); }
}
.act-watch .head { animation: nodDown 1.5s ease; }
@keyframes nodDown {
  0%, 100% { transform: none; }
  30%, 70% { transform: rotate(-6deg) translateY(.12em); }
}

.act-bag .bag { animation: bagHold 1.1s cubic-bezier(.3,1.5,.5,1); }
@keyframes bagHold {
  0%, 100% { transform: none; }
  30% { transform: translateY(-.75em) rotate(-7deg); }
  55% { transform: translateY(-.4em) rotate(6deg); }
}
.act-bag.bag-lap .bag { animation: bagHoldLap 1.1s cubic-bezier(.3,1.5,.5,1); }
@keyframes bagHoldLap {
  0%, 100% { transform: translateY(-1.1em) scale(1.02); }
  30% { transform: translateY(-1.9em) rotate(-7deg) scale(1.02); }
  55% { transform: translateY(-1.5em) rotate(6deg) scale(1.02); }
}
.act-bag .arm { animation: armGrab 1.1s ease; }

@keyframes armGrab {
  0%, 100% { transform: none; }
  40% { transform: rotate(-26deg) translateY(.2em); }
}

.act-legs .shin.l { animation: legCross 1s ease; }
.act-legs .shin.r { animation: legCrossR 1s ease; }
@keyframes legCross {
  0%, 100% { transform: none; }
  50% { transform: translate(.5em, -.3em) rotate(7deg); }
}
@keyframes legCrossR {
  0%, 100% { transform: none; }
  50% { transform: translate(-.5em, -.15em) rotate(-7deg); }
}

.leaning .person { transform: translateY(.4em) scale(1.06); animation: none; }
.leaning .head { transform: rotate(-3deg) translateY(.2em); }

/* 選択フェーズ */

.tap-ring {
  position: absolute;
  bottom: -.35em;
  left: 50%;
  width: 4.2em;
  height: 1.1em;
  margin-left: -2.1em;
  border-radius: 50%;
  border: .22em dashed transparent;
  transition: border-color .25s ease;
  pointer-events: none;
}

.selectable .tap-ring {
  border-color: #f0663ccc;
  animation: ringPulse 1.4s ease-in-out infinite;
}

@keyframes ringPulse {
  0%, 100% { transform: scale(1); opacity: .6; }
  50% { transform: scale(1.1); opacity: 1; }
}

.selectable .passenger { cursor: pointer; }
.selectable .passenger:active .person-wrap { transform: translateY(.2em) scale(.97); }

.passenger.selected .tap-ring {
  border-style: solid;
  border-color: var(--accent);
  animation: none;
  box-shadow: 0 0 0 .18em #f0663c33;
}

.passenger.selected .label {
  background: var(--accent);
  color: #fff;
  border-color: #0003;
  transform: scale(1.06);
}

.passenger.dimmed { opacity: .5; filter: saturate(.55); transition: opacity .4s, filter .4s; }

/* 立つ・降りる */

.passenger.standing .person { transform: translateY(-2.3em); animation: none; }
.passenger.standing .shin { height: 3.5em; }
.passenger.standing .shin.l { transform: translateX(.15em); }
.passenger.standing .shin.r { transform: translateX(-.15em); }
.passenger.standing .lap { transform: translateY(.45em) scaleY(.62); }
.passenger.standing .bag,
.passenger.standing.bag-lap .bag { transform: translateY(1.5em) rotate(-4deg); }
.passenger.standing .head { transform: translateY(-.1em); }

.passenger.exiting .person-wrap {
  transform: translateX(var(--exit-x, 8em));
  opacity: 0;
}

.passenger.gone .person-wrap,
.passenger.gone .tap-ring {
  opacity: 0;
  visibility: hidden;
}

.passenger.gone .label {
  opacity: 0;
}

/* ---------- 床とドア ---------- */

.floor {
  position: relative;
  flex: none;
  height: 9.6em;
  background: linear-gradient(#e4dfd2 0 1.2em, var(--floor));
  border-top: .22em solid #c3bcab;
}

.floor::before { /* 点字ブロック風のライン */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 1.6em;
  height: .7em;
  background: repeating-linear-gradient(90deg, #e8c46a 0 .5em, transparent .5em 1em);
  opacity: .55;
}

.door {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2.4em;
  overflow: hidden;
  background: linear-gradient(#f4f6f8, #dfe4ea);
  border-left: .22em solid #b9c1cd;
  border-right: .22em solid #b9c1cd;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--pu);
}

.door-left { left: 0; }
.door-right { right: 0; }

.door::after { /* 開いた先のホーム看板 */
  content: attr(data-station);
  writing-mode: vertical-rl;
  font-size: .95em;
  font-weight: 900;
  letter-spacing: .1em;
  color: #46506099;
  background: #fff;
  border: .16em solid #9fb0c4;
  border-radius: .3em;
  padding: .4em .1em;
  z-index: 0;
}

.door i {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  z-index: 1;
  background: linear-gradient(#eef1f5, #d6dce4);
  border: .18em solid #b4bcc8;
  transition: transform .7s cubic-bezier(.4,0,.2,1);
}
.door i:first-child { left: 0; }
.door i:last-child { right: 0; }

.door i::before { /* ドア窓 */
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: 16%;
  height: 22%;
  border-radius: .2em;
  background: linear-gradient(#cfe7f5, #eaf6fb);
  border: .16em solid #c9d0da;
}

.car.doors-open .door i:first-child { transform: translateX(-102%); }
.car.doors-open .door i:last-child { transform: translateX(102%); }

/* ---------- プレイヤー ---------- */

.player {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 8;
  font-size: calc(var(--pu) * 1.28);
  width: 7em;
  margin-left: -3.5em;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform-origin: 50% 100%;
  transition: transform .8s cubic-bezier(.35,1.2,.5,1), left .2s ease;
  pointer-events: none;
}

.player[hidden] { display: none; }

.player-tag {
  font-size: .95em;
  font-weight: 900;
  color: #fff;
  background: var(--accent);
  border-radius: .45em;
  padding: .15em .5em;
  line-height: 1;
  letter-spacing: .06em;
  box-shadow: 0 .15em 0 #00000026;
}

.player-arrow {
  font-size: 1.1em;
  line-height: .95;
  color: var(--accent);
  animation: arrowBob 1s ease-in-out infinite;
}

@keyframes arrowBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(.25em); }
}

.player-figure {
  position: relative;
  width: 7em;
  height: 7em;
  margin-top: .1em;
}

.p-head {
  position: absolute;
  left: 50%;
  top: 0;
  margin-left: -1.55em;
  width: 3.1em;
  height: 2.9em;
  border-radius: 46% 46% 42% 42%;
  background: #4a4038;
  box-shadow: inset 0 -.5em 0 #00000024;
}

.p-shoulder {
  position: absolute;
  left: 50%;
  top: 2.5em;
  margin-left: -2.9em;
  width: 5.8em;
  height: 4.5em;
  border-radius: 1.6em 1.6em .4em .4em;
  background: #59647a;
}

.p-arm {
  position: absolute;
  top: 3.1em;
  width: 1.3em;
  height: 4em;
  border-radius: .6em;
  background: #4e5869;
}
.p-arm.l { left: .1em; }
.p-arm.r { right: .1em; }

.passenger.is-you .label {
  background: var(--accent);
  color: #fff;
  border-color: #0003;
}

.passenger.is-you .person { animation: sitIn .5s ease; }

@keyframes sitIn {
  0% { transform: translateY(.8em) scale(.9); }
  100% { transform: none; }
}

/* ---------- バナー・結果 ---------- */

.banner {
  position: absolute;
  left: 50%;
  top: 1.2em;
  transform: translate(-50%, -6px);
  z-index: 10;
  background: #2b2f38;
  color: #fff;
  border-radius: 999px;
  padding: .4em 1.1em;
  font-size: clamp(14px, 4.4vw, 20px);
  font-weight: 800;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}

.banner.show { opacity: 1; transform: translate(-50%, 0); }

.banner.big {
  font-size: clamp(22px, 8vw, 38px);
  font-weight: 900;
  background: #f0663c;
  box-shadow: 0 .18em 0 #00000026;
}

.result {
  position: absolute;
  left: 50%;
  top: 6%;
  transform: translateX(-50%);
  width: 96%;
  z-index: 11;
  text-align: center;
  pointer-events: none;
}

.result[hidden] { display: none; }

.result-title {
  font-size: clamp(34px, 13vw, 62px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--ink);
  text-shadow: 0 .06em 0 #fff, .06em 0 0 #fff, -.06em 0 0 #fff, 0 -.06em 0 #fff,
    .05em .05em 0 #fff, -.05em .05em 0 #fff, 0 .12em .2em #00000026;
  animation: resultPop .5s cubic-bezier(.2,1.6,.4,1);
}

.result.win .result-title { color: #e0562f; }
.result.lose .result-title { color: #2b6ad1; }

@keyframes resultPop {
  0% { transform: scale(.5) rotate(-6deg); opacity: 0; }
  60% { transform: scale(1.12) rotate(2deg); opacity: 1; }
  100% { transform: none; }
}

.result-comment {
  display: inline-block;
  margin-top: .5em;
  background: #fffffff2;
  border: 2px solid #00000014;
  border-radius: 999px;
  padding: .35em .9em;
  font-size: clamp(13px, 4.1vw, 18px);
  font-weight: 800;
  box-shadow: 0 .2em .5em #00000014;
  animation: commentIn .4s ease .25s backwards;
}

@keyframes commentIn {
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: none; }
}

/* ---------- フッター ---------- */

.foot {
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hint {
  font-size: clamp(11px, 3.3vw, 14px);
  font-weight: 700;
  color: var(--sub);
}

.hint[hidden] { display: none; }

.next-btn {
  font: inherit;
  font-size: clamp(16px, 4.8vw, 20px);
  font-weight: 900;
  color: #fff;
  background: var(--accent);
  border: 0;
  border-radius: 999px;
  padding: .55em 1.8em;
  box-shadow: 0 .22em 0 #b7401e;
  cursor: pointer;
  animation: btnIn .3s ease;
}

.next-btn[hidden] { display: none; }
.next-btn:active { transform: translateY(.18em); box-shadow: 0 .06em 0 #b7401e; }

@keyframes btnIn {
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: none; }
}

/* ---------- 称号トースト ---------- */

.toast {
  position: absolute;
  left: 50%;
  bottom: 16%;
  transform: translateX(-50%);
  z-index: 30;
  background: #ffd166;
  border: 3px solid #2b2f38;
  border-radius: 14px;
  padding: 6px 16px;
  text-align: center;
  box-shadow: 0 6px 0 #00000026;
  pointer-events: none;
  animation: toastIn .45s cubic-bezier(.2,1.6,.4,1);
}

.toast[hidden] { display: none; }
.toast.out { animation: toastOut .4s ease forwards; }

.toast-label {
  font-size: clamp(10px, 3vw, 12px);
  font-weight: 800;
  letter-spacing: .18em;
  color: #8a6512;
}

.toast-name {
  font-size: clamp(17px, 5.4vw, 24px);
  font-weight: 900;
  line-height: 1.1;
}

@keyframes toastIn {
  0% { opacity: 0; transform: translate(-50%, 18px) scale(.8); }
  100% { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

@keyframes toastOut {
  0% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -14px) scale(.95); }
}

/* ---------- 画面が狭いとき ---------- */

@media (max-width: 340px) {
  .br-sp { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
  .scenery, .strap, .ad, .zzz, .player-arrow { animation: none !important; }
}