.walk-card{min-width:0;margin:22px 0;padding:24px;border:1px solid #cdc3b0;border-radius:30px;background:linear-gradient(160deg,#f6f1e6ee,#e9e3d5e8);box-shadow:0 15px 45px #4a3f2a18}
.walk-hud{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.walk-floor{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.walk-floor-depth{font:22px/1.1 Georgia,serif;color:#4a3f36;font-variant-numeric:tabular-nums}
.walk-floor-terrain{margin:0}
.walk-steps{white-space:nowrap;background:#e8dcc2;color:#6a5236;font-size:13px;padding:6px 14px;border-radius:20px}
.walk-steps.is-out{background:#ddd7ef;color:#4f4580;font-weight:600}
.walk-party-strip{display:flex;gap:4px;overflow-x:auto;scroll-snap-type:x proximity;padding:2px;max-width:60%}
.walk-portrait{flex:0 0 auto;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#fffaf0aa;border:1px solid #d9cdb4}
.walk-portrait[data-role=lead]{border:2px solid #c9a86a;background:#f4ead4}
.walk-portrait .monster-art{width:30px;height:30px}
/* The stage stacks: floor texture, tiles, mist, party. The mist must never take a tap, and the legal
   moves and the party sit above it so the ring and the sprites stay readable through the weather. */
.walk-stage{position:relative;max-width:380px;margin:0 auto;border-radius:22px;overflow:hidden}
.walk-grid{display:grid;grid-template-columns:repeat(var(--walk-size,5),1fr);gap:5px;padding:8px;border-radius:22px;background:var(--walk-ground,linear-gradient(#dcd4b8,#cfc6a5));border:1px solid #bfb494}
.walk-tile{position:relative;aspect-ratio:1;min-height:0;padding:0;margin:0;border-radius:12px;border:1px solid #b8ad8a;background:radial-gradient(circle at 40% 35%,#ece6cf,#cfc7a6 80%);box-shadow:inset 0 -3px 0 #b3a883;display:grid;place-items:center;transition:transform .35s ease,opacity .3s ease}
.walk-tile[data-fog=dark]{opacity:.42}
.walk-tile[data-fog=dim]{opacity:.74}
.walk-tile[data-fog=clear]{opacity:1}
.walk-tile:enabled{cursor:pointer}.walk-tile:enabled:hover{transform:translateY(-2px)}
.walk-tile:disabled{cursor:default}
/* Tiles the party can step onto wear a wiggling gold ring, so the next move reads at a glance on every
   terrain. The ring is a pseudo-element: the tile colours can't paint over it, and the button itself
   holds still, so the wiggle never moves the target out from under a finger. */
.walk-tile.is-open{z-index:3;opacity:1}
.walk-tile.is-open:after{content:'';position:absolute;inset:-4px;border-radius:15px;border:2px solid #f6c65e;box-shadow:0 0 0 1px #4a3c2a55,0 0 10px #f6c65e70;pointer-events:none;animation:walk-nudge 1.9s ease-in-out infinite;animation-delay:var(--nudge-delay,0ms)}
.walk-tile[data-fog=clear]{background:radial-gradient(circle at 50% 40%,#d5e6b6,#b9d29a 80%);border-color:#96b07a;box-shadow:inset 0 -3px 0 #8fa96f;animation:walk-flip .45s ease-out both}
.walk-tile[data-fog=clear] img{width:74%;height:74%;object-fit:contain;filter:drop-shadow(0 3px 2px #4c5b3230)}
.walk-tile.is-found img{animation:walk-pop .8s cubic-bezier(.2,1.4,.5,1) both}
.walk-tile.is-party{box-shadow:inset 0 0 0 3px #f5dc9a,inset 0 -3px 0 #8fa96f}
/* The mist: thick on a fresh floor, thinner with every tile the party opens up, and always clearest
   at their feet. Tinted per terrain so it reads as weather rather than as a grey scrim. */
.walk-veil{position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:22px;transition:opacity .7s ease;
 background:radial-gradient(circle at var(--veil-x,50%) var(--veil-y,50%),transparent 6%,var(--walk-mist,#8a7f5e) 34%,var(--walk-mist-deep,#5c5238) 100%);
 animation:walk-drift 14s ease-in-out infinite alternate}
.walk-party{position:absolute;inset:8px;z-index:4;pointer-events:none}
.walk-member{position:absolute;display:block;padding:2px;transform-origin:50% 90%;transition:left .45s cubic-bezier(.3,.9,.4,1.1),top .45s cubic-bezier(.3,.9,.4,1.1);transition-delay:calc(var(--index,0) * 90ms);animation:walk-idle 5s ease-in-out infinite;will-change:transform}
.walk-member[data-role=follower]{transform:translate(0,-12%) scale(.86)}
.walk-member[data-role=follower]:before{opacity:.5}
/* A soft ground ellipse stands in for a drop-shadow filter, which repainted every hop. */
.walk-member:before{content:'';position:absolute;left:22%;right:22%;bottom:2px;height:14%;border-radius:50%;background:radial-gradient(closest-side,#3f4a2a45,#3f4a2a00)}
.walk-member .monster-art{position:relative;width:100%;height:100%;display:block}
.walk-party.is-hopping .walk-member{animation:walk-hop .45s ease-out both;animation-delay:calc(var(--index,0) * 90ms)}
.walk-descend{display:block;margin:12px auto 0}
.walk-find{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:6;display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px 22px 14px;border-radius:22px;background:#fffaf0f2;border:2px solid #f0c86e;box-shadow:0 18px 40px #5a4a3a40;text-align:center;color:#5a4a3a;cursor:pointer;min-width:190px}
.walk-find img{width:72px;height:72px;object-fit:contain}
.walk-find strong{font:22px/1.2 Georgia,serif;color:#b64f43}
.walk-find span:last-child{font-size:13px;color:#76637f}
.walk-find.is-rare{border-color:#a99ce0;background:#f7f4ff}.walk-find.is-rare strong{color:#5f4aa8}
.walk-find-sparkle{position:absolute;top:-14px;right:-8px;font-size:30px;color:#f0b64e}
.walk-find.is-showing{animation:walk-find-pop .55s cubic-bezier(.2,1.4,.5,1) both}.walk-find.is-showing .walk-find-sparkle{animation:walk-sparkle 1.2s ease-in-out infinite}
@keyframes walk-find-pop{0%{transform:translate(-50%,-30%) scale(.4);opacity:0}100%{transform:translate(-50%,-50%) scale(1);opacity:1}}
@keyframes walk-sparkle{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.4) rotate(20deg)}}
@keyframes walk-drift{from{transform:translate3d(-2%,-1%,0) scale(1.06)}to{transform:translate3d(2%,1%,0) scale(1.12)}}
.walk-caption{margin:14px 0 6px;min-height:24px;color:#4a3f36}.walk-caption button{margin-left:4px}
/* The message box. Fixed height with its own scroll, so a long log can never push the floor further
   off the screen, and the page itself is never scrolled when a line lands. */
.walk-log-frame{height:clamp(132px,22vh,190px);overflow-y:auto;overscroll-behavior:contain;border-radius:18px;background:#fffaf0aa;border:1px solid #ddd2ba;padding:10px 12px;outline-offset:-3px}
.walk-log{list-style:none;margin:0;padding:0}
.walk-log-line{font-size:13px;line-height:1.55;padding:2px 0;color:#4a3f36;animation:walk-log-in .14s ease-out both}
.walk-log-line[data-kind=move]{color:#8a7d6a}
.walk-log-line[data-kind=find]{color:#7a5a30}
.walk-log-line[data-kind=event]{color:#8a6410;font-weight:600}
.walk-log-line[data-kind=rare]{color:#5f4aa8;font-weight:600}
.walk-log-line[data-kind=camp]{color:#5b5288}
.walk-log-line[data-kind=floor]{text-align:center;color:#7a6e5c;border-top:1px solid #e0d6bf;margin-top:6px;padding-top:6px}
.walk-log-line[data-kind=banter]{font-style:italic;color:#6f6250}
.walk-log-who{font-style:normal;font-weight:600;color:#7a6250}
@keyframes walk-log-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.walk-reset{margin:8px 0 0}
.walk-basket{margin-top:18px;padding-top:14px;border-top:1px dashed #cdbf9d}.walk-basket h3{font-size:20px;margin-bottom:8px;color:#5a4a3a}
.walk-basket-hint{margin:0 0 12px}
.walk-items{list-style:none;padding:0;margin:0;display:grid;gap:8px}.walk-items li{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:12px;padding:10px 12px;border-radius:16px;background:#fffaf0cc}.walk-items li img{width:44px;height:44px;object-fit:contain}.walk-item-text{display:flex;flex-direction:column;gap:2px;min-width:0}.walk-item-name{font-weight:600;color:#5a4a3a}.walk-item-count{color:#8a6d4c;font-size:13px;font-weight:400}.walk-items li .small{margin:0;line-height:1.4}.walk-items li button{justify-self:end;white-space:nowrap}
.walk-feed{display:grid;gap:10px;margin-top:6px}.walk-feed-item{display:grid;grid-template-columns:52px 1fr;gap:12px;align-items:center;padding:10px 12px;border-radius:16px;background:#f4ead4}.walk-feed-item img{width:52px;height:52px;object-fit:contain}.walk-feed-item>span{display:flex;flex-direction:column;gap:3px}.walk-feed-result{margin:0;padding:10px 12px;border-radius:14px;background:#e6f0d4;color:#475e43;font-weight:600}.walk-feed-title{margin:0;font-weight:600;color:#5a4a3a}.walk-feed .small{margin:0}.walk-feed-row{display:grid;grid-template-columns:44px 1fr auto;gap:10px;align-items:center;padding:8px 10px;border-radius:14px;background:#fffaf0aa}.walk-feed-row>span{display:flex;flex-direction:column;gap:3px;min-width:0}.walk-feed-bar{display:block;height:8px;border-radius:6px;background:#e3d5b8;overflow:hidden}.walk-feed-bar span{display:block;width:100%;height:100%;border-radius:6px;background:linear-gradient(90deg,#e8705f,#f0a45b);transform-origin:left center;transition:transform .9s cubic-bezier(.3,1.4,.5,1)}.walk-feed-row img,.walk-feed-row .monster-art{width:44px;height:44px;object-fit:contain}.walk-feed-row .small{margin:0}
.level-bar{position:relative;display:grid;gap:4px;margin:6px 0}.level-bar .walk-feed-bar{height:14px;border-radius:9px;background:#e7e1f1;box-shadow:inset 0 1px 2px #6a5a8a26}.level-bar .walk-feed-bar span{background:linear-gradient(90deg,#b49ad8,#8fa9df)}.level-bar-label{margin:0;color:#5f5080;font-weight:600;font-variant-numeric:tabular-nums}.level-bar.is-full .walk-feed-bar span{background:linear-gradient(90deg,#9f8fdc,#9cc4ea,#9f8fdc);background-size:200% 100%;animation:level-shimmer 2.4s linear infinite}.level-bar.is-gaining .walk-feed-bar{animation:level-glow 1.1s ease-out}.level-bar-gain{position:absolute;right:4px;top:-6px;padding:1px 8px;border-radius:10px;background:#8d7cc8;color:#fffaf0;font-weight:700;font-size:13px;pointer-events:none;animation:level-gain 1.6s ease-out forwards}.level-gain-pill{background:#e6e3f6;color:#584a8c;font-weight:700;white-space:nowrap}
@keyframes level-gain{0%{transform:translateY(8px) scale(.6);opacity:0}20%{transform:translateY(-4px) scale(1.2);opacity:1}70%{transform:translateY(-10px);opacity:1}100%{transform:translateY(-18px);opacity:0}}
@keyframes level-glow{0%,100%{box-shadow:inset 0 1px 2px #6a5a8a26}40%{box-shadow:inset 0 1px 2px #6a5a8a26,0 0 0 5px #a99ce055}}
@keyframes level-shimmer{to{background-position:-200% 0}}
.gift-tag{display:flex;align-items:center;gap:10px;margin:10px 0;padding:8px 12px;border-radius:16px;background:#f4ead4;color:#5a4a3a;font-size:14px}.gift-tag img{width:36px;height:36px;object-fit:contain}
.gift-controls{margin:4px 0 18px}.gift-controls .field-label{margin-bottom:8px}
.gift-tray{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 10px;margin:0 0 4px;scrollbar-width:thin}
.gift-tile{flex:0 0 auto;display:grid;justify-items:center;gap:2px;width:96px;min-height:104px;padding:10px 6px;border:1px solid #e3d5bd;border-radius:18px;background:#fffaf0;color:#5a4a3a;font-size:13px;line-height:1.2;touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab;transition:transform .15s,background .15s,opacity .15s}
.gift-tile:hover{transform:translateY(-2px)}.gift-tile:active{cursor:grabbing}
.gift-tile img{width:44px;height:44px;object-fit:contain;pointer-events:none}
.gift-tile[aria-pressed=true]{border:2px solid #c9a86a;background:#f4ead4;padding:9px 5px}
.gift-count{color:#8a7560;font-size:12px}
.gift-tile.gift-used{opacity:.55;cursor:pointer}.gift-tile.gift-used:hover{transform:none}
.gift-ghost{position:fixed;left:0;top:0;z-index:20;pointer-events:none;will-change:transform}
.gift-ghost img{display:block;width:56px;height:56px;margin:-28px 0 0 -28px;object-fit:contain;filter:drop-shadow(0 6px 10px #6a4a3a40);transform:rotate(-8deg) scale(1.1)}
.gift-ghost.gift-return{transition:transform .25s ease-in,opacity .25s;opacity:0}
.paper.gift-drop-ready{outline:3px dashed #c9a86a;outline-offset:4px;box-shadow:0 0 0 8px #f4ead480,0 8px 24px #b4a0dc18}
.paper-gift{position:relative;z-index:1}.paper-gift:empty{display:none}
.paper-gift .gift-tag{width:fit-content;max-width:100%;margin:4px 0 0}
.gift-remove{border:0;background:transparent;color:#7a6250;font-size:20px;line-height:1;min-width:32px;min-height:32px;border-radius:50%;margin-left:2px}.gift-remove:hover{background:#e9dcc2}
.gift-pop{animation:gift-pop .35s ease-out}
@keyframes gift-pop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.08);opacity:1}100%{transform:scale(1)}}
@keyframes walk-idle{0%,100%{transform:translate(0,-12%) scale(1.15)}50%{transform:translate(0,-16%) scale(1.15)}}
@keyframes walk-hop{0%{transform:translate(0,-12%) scale(1.15)}45%{transform:translate(0,-42%) scale(1.2,1.08)}75%{transform:translate(0,-8%) scale(1.22,1.02)}100%{transform:translate(0,-12%) scale(1.15)}}
@keyframes walk-happy{0%,100%{transform:translate(0,-12%) scale(1.15)}30%{transform:translate(0,-30%) scale(1.25,1.05) rotate(-6deg)}60%{transform:translate(0,-26%) scale(1.25,1.05) rotate(6deg)}}
@keyframes walk-flip{0%{transform:rotateY(90deg);opacity:.4}100%{transform:rotateY(0);opacity:1}}
@keyframes walk-nudge{0%,100%{transform:rotate(0) scale(1)}25%{transform:rotate(-3.5deg) scale(1.04)}60%{transform:rotate(3.5deg) scale(1.04)}}
@keyframes walk-pop{0%{transform:scale(.2) translateY(30%);opacity:0}60%{transform:scale(1.35) translateY(-10%);opacity:1}100%{transform:scale(1) translateY(0)}}
@media(max-width:760px){.walk-card{padding:18px}.walk-hud{gap:8px}.walk-party-strip{max-width:100%}.walk-items li{grid-template-columns:40px 1fr;gap:6px 12px}.walk-items li img{grid-row:span 2}.walk-items li button,.walk-items li .pill{grid-column:2;justify-self:start;margin-top:2px}.walk-feed-row{grid-template-columns:40px 1fr}.walk-feed-row button{grid-column:2;justify-self:start}}
@media(prefers-reduced-motion:reduce){.walk-member,.walk-party.is-hopping .walk-member,.walk-tile[data-fog=clear],.walk-tile.is-open:after,.walk-tile.is-found img,.walk-find.is-showing,.walk-find.is-showing .walk-find-sparkle,.walk-log-line,.walk-veil,.walk-feed-bar span,.level-bar .walk-feed-bar,.level-bar-gain{animation:none!important;transition:none!important}.level-bar-gain{opacity:1;transform:none}}
[data-message-effects=off] .walk-member,[data-message-effects=off] .walk-party.is-hopping .walk-member,[data-message-effects=off] .walk-tile[data-fog=clear],[data-message-effects=off] .walk-tile.is-open:after,[data-message-effects=off] .walk-tile.is-found img,[data-message-effects=off] .walk-log-line,[data-message-effects=off] .walk-veil{animation:none!important}
/* Without the wiggle the ring carries the whole hint, so it gets thicker and brighter. */
@media(prefers-reduced-motion:reduce){.walk-tile.is-open:after{inset:-5px;border-radius:16px;border-width:3px;box-shadow:0 0 0 1px #4a3c2a88,0 0 12px #f6c65e88}}
[data-message-effects=off] .walk-tile.is-open:after{inset:-5px;border-radius:16px;border-width:3px;box-shadow:0 0 0 1px #4a3c2a88,0 0 12px #f6c65e88}

/* Terrain follows depth, and reuses the world's own ground textures and colours rather than new art.
   The floor is painted once, under the tiles, because the trail PNGs only tile horizontally: slicing
   one across 25 tiles would show a vertical seam. --walk-mist tints the weather to match. */
.walk-card[data-floor-terrain] .walk-grid{background-color:var(--walk-floor,#cfc6a5);background-image:var(--walk-trail,none);background-size:cover;background-position:center}
.walk-card[data-floor-terrain=meadow]{--walk-floor:#d5a565;--walk-trail:url('/assets/world/travel-trail-meadow.png');--walk-mist:#9fae7a66;--walk-mist-deep:#5f6b41cc}
.walk-card[data-floor-terrain=forest]{--walk-floor:#b28c53;--walk-trail:url('/assets/world/travel-trail-forest.png');--walk-mist:#7f9a7c66;--walk-mist-deep:#3f5540cc}
.walk-card[data-floor-terrain=coast]{--walk-floor:#f6dfba;--walk-trail:url('/assets/world/travel-trail-coast.png');--walk-mist:#8fb4c966;--walk-mist-deep:#40607acc}
.walk-card[data-floor-terrain=ember]{--walk-floor:#a8785a;--walk-trail:url('/assets/world/travel-trail-ember.png');--walk-mist:#b3866b66;--walk-mist-deep:#5e3a2ecc}
.walk-card[data-floor-terrain=snow]{--walk-floor:#dfe6ec;--walk-trail:url('/assets/world/travel-trail-snow.png');--walk-mist:#c3cfdc66;--walk-mist-deep:#6c7b8ccc}
.walk-card[data-floor-terrain=blizzard]{--walk-floor:#b9c6d6;--walk-trail:url('/assets/world/travel-trail-blizzard.png');--walk-mist:#a9b6ce66;--walk-mist-deep:#4d5670cc}
/* Every lap of the six terrains sits a shade deeper than the last. */
.walk-card[data-depth-tier="1"] .walk-grid{filter:brightness(.92) saturate(.94)}
.walk-card[data-depth-tier="2"] .walk-grid{filter:brightness(.85) saturate(.88)}
.walk-card:not([data-depth-tier="0"]):not([data-depth-tier="1"]):not([data-depth-tier="2"]) .walk-grid{filter:brightness(.78) saturate(.82)}
/* Two columns once there is room: the floor on the left, the log beside it rather than under it. */
@media(min-width:760px){.walk-card{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);grid-template-areas:'hud hud' 'stage log' 'stairs log' 'caption log' 'reset log' 'basket basket';gap:0 20px;align-items:start}
 .walk-hud{grid-area:hud}.walk-stage{grid-area:stage}.walk-descend{grid-area:stairs}.walk-caption{grid-area:caption}.walk-log-frame{grid-area:log;height:100%;min-height:320px}.walk-reset{grid-area:reset}.walk-basket{grid-area:basket}}