/* Delivery journeys on My monsters: tabs per monster, a little road from home to the mailbox, and the finds along it. */
.journey-card{min-width:0;margin:22px 0;padding:24px;border:1px solid #d6cde2;border-radius:30px;background:linear-gradient(165deg,#fbf7ff,#f1ecf8 60%,#f6efe4);box-shadow:0 15px 45px #6e5a8a12}
.journey-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.journey-heading h2{font:clamp(24px,3vw,32px)/1.2 Georgia,serif;margin:5px 0;color:#4f4166}.journey-heading .eyebrow{font-size:10px;color:#7d6a98;margin-bottom:0}
.journey-count{white-space:nowrap;background:#e7dcf3;color:#5a4677;font-size:13px;padding:6px 14px;border-radius:20px}
.journey-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.journey-tab{display:flex;align-items:center;gap:8px;padding:6px 14px 6px 8px;min-height:48px;border-radius:24px;border:1px solid #d8cde6;background:#fffaf5;color:#4f4166;font-size:14px;text-align:left}
.journey-tab .monster-art{width:38px;height:38px}
.journey-tab>span{display:flex;flex-direction:column;line-height:1.25}
.journey-tab-note{font-size:11px;color:#7d6a98}
.journey-tab[aria-selected=true]{border:2px solid #9d7cc1;background:#efe5f8;padding:5px 13px 5px 7px}
.journey-tab[data-phase=away] .journey-tab-note{color:#5f7d4c;font-weight:600}
.journey-tab:focus-visible{outline:3px solid #9466bc;outline-offset:3px}

.journey-road{--walker:96px;position:relative;height:150px;border-radius:22px;overflow:hidden;border:1px solid #cfc4b0;background:linear-gradient(180deg,#fdebd4 0,#f7e3cc 48%,#cfe0b6 48%,#bcd49f 100%)}
.journey-road[data-courier=slime]{background:linear-gradient(180deg,#e4efdc 0,#d7e8cf 48%,#a9c69a 48%,#94b787 100%)}
.journey-road[data-courier=fire]{background:linear-gradient(180deg,#ffe2c6 0,#fbd2b0 48%,#dcb592 48%,#c99e7d 100%)}
/* Soft hills scrolling slowly behind the road give a sense of travel. */
.journey-scenery{position:absolute;left:0;right:0;top:38px;height:40px;background:radial-gradient(ellipse 60px 26px at 30px 40px,#ffffff66 0 98%,transparent 100%) 0 0/120px 40px repeat-x,radial-gradient(ellipse 90px 30px at 90px 40px,#ffffff44 0 98%,transparent 100%) 0 0/200px 40px repeat-x;animation:journey-scenery 18s linear infinite reverse}
.journey-path{position:absolute;left:0;right:0;bottom:26px;height:14px;background:#e9d9b8;border-block:2px solid #cdb88f}
.journey-path::after{content:'';position:absolute;left:0;right:0;top:5px;height:3px;background:repeating-linear-gradient(90deg,#c8b187 0 12px,transparent 12px 24px);animation:travel-path .9s linear infinite}
.journey-home,.journey-mailbox{position:absolute;bottom:34px;z-index:1;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#fffaf0;border:2px solid #7c6b55;color:#6a5236;font-size:18px;box-shadow:0 3px 0 #7c6b5533}
.journey-home{left:8px}.journey-mailbox{right:8px;background:#f6dce4;border-color:#8c5a6d;color:#8c5a6d}
.journey-walker{position:absolute;z-index:3;bottom:22px;left:calc(48px + var(--progress,0) * (100% - 96px - var(--walker)));width:var(--walker);height:var(--walker);transition:left 1s linear}
.journey-walker .journey-monster{width:100%;height:100%;overflow:visible;transform-origin:50% 95%;animation:travel-trot .7s ease-in-out infinite}
.journey-road[data-courier=slime] .journey-monster{animation:travel-squish 1.1s ease-in-out infinite}
.journey-road[data-courier=fire] .journey-monster{animation:travel-bounce .8s cubic-bezier(.3,0,.6,1) infinite}
/* Diplope's sprite faces left; flip it so it walks toward the mailbox with the bindle trailing behind. */
.journey-road[data-courier=diplo] .journey-walker{scale:-1 1}
.journey-find-spot{position:absolute;z-index:2;bottom:44px;left:calc(40px + var(--at,0) * (100% - 80px - 96px) + 30px);width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:#fffaf0cc;border:1px dashed #b49a6c}
.journey-find-spot img{width:24px;height:24px;object-fit:contain;opacity:.85}
.journey-progress{height:10px;margin:12px 0 0;border-radius:6px;background:#e3d9ec;overflow:hidden}
.journey-progress-fill{display:block;height:100%;background:linear-gradient(90deg,#b99bd9,#8fbf85);transform-origin:left;transform:scaleX(0);transition:transform 1s linear}
.journey-status{margin:12px 0 4px;color:#4f4166}
.journey-subhead{font:18px Georgia,serif;margin:16px 0 8px;color:#4f4166}
.journey-finds{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0 0 12px}
.journey-find{display:flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border-radius:18px;background:#fffaf0;border:1px solid #e1d4bc;font-size:14px;color:#5a4a3a}
.journey-find img{width:32px;height:32px;object-fit:contain}
.journey-find.is-new{animation:journey-found .9s cubic-bezier(.3,1.6,.5,1) both;border-color:#d8b064;box-shadow:0 0 0 3px #f7e3b3}
.journey-empty{margin:0 0 12px}
.journey-return{display:flex;align-items:center;gap:14px;padding:12px;border-radius:20px;background:#fffaf0;border:1px solid #e1d4bc;margin-bottom:12px}
.journey-return .journey-monster{flex:none;width:92px;height:100px}
.journey-return p{margin:4px 0 0}
.journey-panel>.secondary{margin-top:4px}
.journey-live{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.garden-away{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin:12px 0 0;padding:8px 14px;border-radius:16px;background:#f3ecf8;color:#5a4677}
.garden-away .quiet{min-height:36px;padding:4px 8px}
@keyframes journey-scenery{to{background-position:-120px 0,-200px 0}}
@keyframes journey-found{0%{opacity:0;transform:translateY(10px) scale(.6)}60%{opacity:1;transform:translateY(-4px) scale(1.08)}100%{transform:none}}
@media(max-width:520px){.journey-card{padding:18px}.journey-road{--walker:80px;height:132px}.journey-tab{flex:1 1 140px}}
@media(prefers-reduced-motion:reduce){:is(.journey-card,.travel-postcard) *{animation:none!important;transition:none!important}}
/* The road in a postcard frame: after sending, and on Home while the featured monster delivers. */
.travel-postcard{width:100%;text-align:center}
.travel-postcard .journey-road{--walker:150px;height:230px;border-radius:14px}
.travel-postcard .journey-path{bottom:36px}
.travel-postcard .journey-home,.travel-postcard .journey-mailbox{bottom:46px}
.travel-postcard .journey-walker{bottom:30px}
.travel-postcard .skill-visual{overflow:visible}
.home-postcard .travel-postcard .journey-road{--walker:190px;height:300px}
.postcard-sent.travel-postcard{max-width:520px;margin:12px auto}
@media(max-width:520px){.travel-postcard .journey-road{--walker:118px;height:190px}.home-postcard .travel-postcard .journey-road{--walker:140px;height:230px}}

/* Opaque terrain reaches beyond the clipped scene bottom; no floating ribbon. */
.journey-road .journey-path{height:38%;min-height:72px;bottom:-2px;left:0;right:auto;width:calc(100% + 480px);border:0;background:#d5a565 url('/assets/world/travel-trail-meadow.png') 0 0 / 480px auto repeat-x;will-change:transform;animation:journey-trail 15s linear infinite}
.journey-road .journey-path::after{content:none}
/* One repeating contour clips the ground and inks its exact edge. Both move
   with the 480px trail tile, including during terrain crossfades. */
.journey-road{--trail-mask:url('/assets/world/trail-edge-mask.svg');--trail-outline:url('/assets/world/trail-edge-outline.svg')}
.journey-road .journey-path,.world-trail-layer{-webkit-mask:var(--trail-mask) 0 0 / 480px 1024px repeat-x;mask:var(--trail-mask) 0 0 / 480px 1024px repeat-x}
.journey-road .journey-path::before,.world-trail-layer::before{content:'';position:absolute;top:0;left:0;right:0;height:28px;background:var(--trail-outline) 0 0 / 480px auto repeat-x;z-index:2;pointer-events:none}
.journey-road .journey-monster{animation-name:journey-step;animation-duration:1.2s}
.journey-road[data-courier=slime] .journey-monster{animation:journey-soft-squish 1.5s ease-in-out infinite}
.journey-road[data-courier=fire] .journey-monster{animation:journey-soft-hop 1.2s ease-in-out infinite}
.journey-road[data-stage=home] .journey-monster,.journey-road[data-stage=office] .journey-monster{animation:none}
.journey-road[data-stage=home] .journey-path,.journey-road[data-stage=office] .journey-path{animation-play-state:paused}
@keyframes journey-trail{to{transform:translate3d(-480px,0,0)}}
@keyframes journey-step{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-2px) rotate(1deg)}}
@keyframes journey-soft-squish{0%,100%{transform:scale(1.025,.975)}50%{transform:translateY(-2px) scale(.985,1.015)}}
@keyframes journey-soft-hop{0%,100%{transform:translateY(0) scale(1.025,.975)}50%{transform:translateY(-4px) scale(.985,1.015)}}
@media(prefers-reduced-motion:reduce){.journey-road *{animation:none!important;transition:none!important}}
[data-message-effects=off] .journey-road *{animation:none!important;transition:none!important}
/* One walking cycle avoids stacking the idle squash on the travel squash. */
.journey-road .slime-squish{animation:none}

.journey-road:not(.world-journey)[data-courier=slime] .journey-path{background-color:#b28c53;background-image:url('/assets/world/travel-trail-forest.png')}
.journey-road:not(.world-journey)[data-courier=fire] .journey-path{background-color:#e89570;background-image:url('/assets/world/travel-trail-ember.png')}

.world-trail-layer[data-region=woods]{--trail-mask:url('/assets/world/trail-edge-forest-mask.svg');--trail-outline:url('/assets/world/trail-edge-forest-outline.svg')}
.world-trail-layer[data-region=cove]{--trail-mask:url('/assets/world/trail-edge-coast-mask.svg');--trail-outline:url('/assets/world/trail-edge-coast-outline.svg')}
.world-trail-layer[data-region=rock]{--trail-mask:url('/assets/world/trail-edge-ember-mask.svg');--trail-outline:url('/assets/world/trail-edge-ember-outline.svg')}
.world-trail-layer[data-region=snow]{--trail-mask:url('/assets/world/trail-edge-snow-mask.svg');--trail-outline:url('/assets/world/trail-edge-snow-outline.svg')}
.world-trail-layer[data-region=peaks]{--trail-mask:url('/assets/world/trail-edge-blizzard-mask.svg');--trail-outline:url('/assets/world/trail-edge-blizzard-outline.svg')}
.journey-road:not(.world-journey)[data-courier=slime]{--trail-mask:url('/assets/world/trail-edge-forest-mask.svg');--trail-outline:url('/assets/world/trail-edge-forest-outline.svg')}
.journey-road:not(.world-journey)[data-courier=fire]{--trail-mask:url('/assets/world/trail-edge-ember-mask.svg');--trail-outline:url('/assets/world/trail-edge-ember-outline.svg')}