.travel-day-overlay {
      position: fixed;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 100;
      padding: 2vh 2vw;
      background: #000;
      color: #f7f1d3;
      overflow: hidden;
      font-family: "Yu Gothic", "Meiryo", system-ui, sans-serif;
    }

    .travel-day-overlay.show {
      display: flex;
    }

    .travel-day-frame {
      position: relative;
      width: min(96vw, 1600px);
      max-height: 96vh;
      aspect-ratio: 1536 / 1024;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .travel-day-image {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
      image-rendering: auto;
    }

    .travel-day-scene {
      position: absolute;
      /* Keep the original full-frame coordinate system for bottom: 6%. */
      inset: 0;
      z-index: 1;
      overflow: visible;
      pointer-events: none;
    }

    /* Green-frame bounds only mask the horizontal visible range. They do
       not become the train's vertical positioning coordinate system. */
    .travel-day-train-clip {
      position: absolute;
      top: 0;
      right: 3.776%;
      bottom: 0;
      left: 3.711%;
      /* Keep clipping on the actual parent of the transformed image.
         The extra paint containment avoids compositor escape in browsers
         that promote the animated image to its own layer. */
      overflow: hidden;
      clip-path: inset(0);
      contain: paint;
      isolation: isolate;
      pointer-events: none;
    }

    .travel-day-train {
      position: absolute;
      left: 0;
      bottom: var(--travel-train-bottom, 6%);
      width: var(--travel-train-width, min(65%, 1040px));
      max-width: none;
      height: auto;
      display: block;
      object-fit: contain;
      pointer-events: none;
      transform: translate3d(var(--travel-train-start-x, -100%), 0, 0);
      will-change: transform;
    }

    .travel-day-overlay.show .travel-day-train.is-running {
      animation: travel-day-train-run 4.5s linear 1 forwards;
    }

    @keyframes travel-day-train-run {
      from { transform: translate3d(var(--travel-train-start-x, -100%), 0, 0); }
      to { transform: translate3d(var(--travel-train-end-x, 100%), 0, 0); }
    }

    .travel-day-text {
      position: absolute;
      z-index: 2;
      left: 50%;
      top: 8%;
      width: min(82%, 1200px);
      transform: translateX(-50%);
      text-align: center;
      pointer-events: none;
    }

    .travel-day-title {
      color: #f2bd2f;
      font-size: clamp(46px, 6.2vw, 104px);
      font-weight: 1000;
      letter-spacing: .34em;
      text-indent: .34em;
      line-height: 1;
      text-shadow:
        4px 4px 0 rgba(99, 72, 16, .82),
        0 0 16px rgba(255, 208, 72, .22);
    }

    .travel-day-date {
      color: #ffffff;
      margin-top: clamp(10px, 1.2vw, 18px);
      font-size: clamp(32px, 4vw, 64px);
      font-weight: 900;
      letter-spacing: .16em;
      line-height: 1;
    }

    .travel-day-rule {
      width: min(88%, 1380px);
      height: 3px;
      margin: 0 auto;
      background: linear-gradient(90deg, transparent, rgba(247, 241, 211, .68), transparent);
    }

    .travel-day-sub {
      margin-top: clamp(14px, 1.5vw, 24px);
      color: #ffffff;
      font-size: clamp(22px, 2.8vw, 42px);
      font-weight: 900;
      letter-spacing: .04em;
      text-shadow: 3px 3px 0 rgba(0, 0, 0, .42);
    }

    .travel-day-debug-controls {
      position: absolute;
      z-index: 3;
      right: clamp(14px, 2vw, 30px);
      bottom: clamp(14px, 2vh, 26px);
      width: min(330px, 44vw);
      padding: 10px;
      border: 1px solid rgba(141, 223, 255, .8);
      border-radius: 8px;
      background: rgba(1, 15, 29, .86);
      color: #e9fbff;
      font: 800 13px/1.45 "Yu Gothic", "Meiryo", sans-serif;
      box-shadow: 0 5px 18px rgba(0, 0, 0, .56);
    }

    .travel-day-debug-controls[hidden] { display: none; }

    .travel-day-debug-buttons { display: flex; gap: 7px; margin-bottom: 7px; }

    .travel-day-debug-controls button {
      padding: 5px 10px;
      border: 1px solid rgba(206, 244, 255, .75);
      border-radius: 4px;
      background: linear-gradient(#1e648d, #0c3455);
      color: #fff;
      font: inherit;
      cursor: pointer;
    }

    .travel-day-debug-controls button:disabled { opacity: .48; cursor: default; }

    .travel-day-debug-info { white-space: pre-line; color: #c7eaff; }