/* The walk (14.0): Home is a road. walk.js draws the world on its own canvas behind the top bar and
   the bottom bar; everything here is the glass on top of it. Night glass whatever the time of day,
   because the road is always at night. */
/* --wk-top is where the top bar ends, set on the page by app.js (walkChrome) so everything on the road
   lines up with it, notch or no notch. Only a fallback lives here: setting it on #walk-layer itself would
   hide the real one from everything inside the road. */
:root{--wk-top:120px}
#walk-layer{position:fixed;inset:0;z-index:0;display:none;overflow:hidden;color:#eef3fc;
  --wk-glass:rgba(10,15,36,.72);--wk-rim:rgba(176,204,255,.22);--wk-ink:#eef3fc;--wk-ink2:#aebbd6;--wk-glow:#7aefec;--wk-dust:#ffe08a;--wk-bottom:300px;
  touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
body.walk-home #walk-layer{display:block}
#walk-layer.wk-off>:not(.wk-gl):not(.wk-ui):not(.wk-landcard):not(.wk-fade){opacity:0;pointer-events:none}
#walk-layer>*{transition:opacity .45s}
.wk-gl,.wk-ui{position:absolute;inset:0;width:100%;height:100%;display:block;image-rendering:auto}
.wk-ui{pointer-events:none;z-index:9}
/* the light path on phones (walk.js LITE): the dark edges and the flash as plain layers over the scene */
.wk-vig,.wk-flash{position:absolute;inset:0;pointer-events:none;z-index:1}
.wk-vig{display:none;background:radial-gradient(ellipse 75% 62% at 50% 46%,rgba(4,5,14,0) 52%,rgba(4,5,14,.32) 78%,rgba(4,5,14,.6) 100%)}
#walk-layer.wk-lite .wk-vig{display:block}
.wk-flash{opacity:0;z-index:2;mix-blend-mode:normal}

/* ---- Home becomes the road: the old stage steps aside, the bars stay ---- */
body.walk-home #home-biome,
body.walk-home #stage,
body.walk-home #moon-line,
body.walk-home .home-footer>#gesture-hint,
body.walk-home .home-footer>#lineup,
body.walk-home .home-footer>.home-links{display:none!important}
body.walk-home .topbar{position:relative;z-index:3}
body.walk-home #home{position:relative;z-index:2;pointer-events:none}
body.walk-home #home :is(.home-strip,.home-footer,.event-banner,.bottom-nav){pointer-events:auto}
body.walk-home .home-footer{margin-top:auto}
/* the journal, the news and the market become a column of round buttons on the right */
body.walk-home .home-strip{position:fixed;right:max(12px,env(safe-area-inset-right,0px));top:var(--wk-top);z-index:4;display:flex;flex-direction:column;gap:8px;margin:0;width:auto}
body.walk-home .home-strip>button{width:48px!important;height:48px!important;min-width:0!important;min-height:0!important;padding:0!important;border-radius:16px!important;display:grid!important;place-items:center!important;grid-template-columns:none!important;overflow:hidden}
body.walk-home .home-strip>button[hidden]{display:none!important}
body.walk-home .journal-home>:not(.journal-icon){display:none!important}
body.walk-home .journal-home .journal-icon{margin:0!important}
body.walk-home .event-banner:not([hidden]){position:fixed;right:max(12px,env(safe-area-inset-right,0px));top:calc(var(--wk-top) + var(--wk-strip,170px));z-index:4;width:48px!important;height:48px!important;min-height:0!important;padding:0!important;border-radius:16px!important;display:grid!important;place-items:center!important;grid-template-columns:none!important;overflow:hidden}
body.walk-home .event-banner>:not(.event-spark){display:none!important}
/* the energy pill takes the wordmark's place on Home */
.energy-button{align-items:center;gap:8px;height:44px;padding:0 12px 0 10px;border-radius:999px;font:inherit;cursor:pointer;flex:none}
body:not(.walk-on) .energy-button{display:none!important}
body.walk-on .energy-button{display:inline-flex}
body.walk-on .topbar .wordmark{display:none}
@media (min-width:760px){body.walk-on .topbar .wordmark{display:flex}}
.energy-button canvas{width:14px;height:20px;image-rendering:pixelated;flex:none}
.energy-button .en-mid{display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:3px}
.energy-button .en-time{display:none;font-size:10px;line-height:11px;height:11px;letter-spacing:.06em;font-variant-numeric:tabular-nums;text-align:center;color:#aebbd6;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.energy-button.ticking .en-time{display:block}
.energy-button.empty .en-time{color:#ffd0dc}
html.glow[data-lux="day"] .energy-button .en-time{color:#fff;text-shadow:0 1px 2px rgba(16,44,104,.45)}
/* the next point, creeping in at the end of the bar */
.energy-button .en-bar u{position:absolute;top:0;bottom:0;left:0;width:0;transform:scaleX(0);transform-origin:0 50%;background:rgba(122,239,236,.42);box-shadow:0 0 6px rgba(122,239,236,.5);transition:transform 1s linear}
.energy-button .en-bar{position:relative;width:clamp(36px,11vw,72px);height:8px;border-radius:2px;background:rgba(122,239,236,.14);box-shadow:inset 0 0 0 1px rgba(122,239,236,.32);overflow:hidden}
.energy-button .en-bar i{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(90deg,#2aa7b8,#7aefec 70%,#eaffff);box-shadow:0 0 10px #7aefec;transition:width .45s cubic-bezier(.34,1.56,.64,1)}
.energy-button b{font-weight:700;font-variant-numeric:tabular-nums;color:#7aefec;min-width:2ch;text-align:right;text-shadow:0 0 10px rgba(122,239,236,.55)}
.energy-button.over b{color:#ffd27a;text-shadow:0 0 10px rgba(255,210,122,.6)}
.energy-button.empty b{color:#ffb3c7}
html.glow[data-lux="day"] .energy-button b{color:#fff;text-shadow:0 1px 2px rgba(16,44,104,.4),0 0 10px rgba(122,239,236,.9)}

/* ---- the head: where you are, and how far along this land ---- */
.wk-head{position:absolute;left:72px;right:72px;top:calc(var(--wk-top) + 4px);z-index:5;display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none}
.wk-land{font-weight:700;letter-spacing:.26em;text-transform:uppercase;font-size:11px;text-shadow:0 1px 3px rgba(0,0,0,.9),0 0 12px rgba(0,0,0,.6);max-width:calc(100vw - 150px);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wk-track{display:flex;gap:4px;align-items:center;padding:5px 9px;border-radius:999px;background:rgba(8,12,30,.55);border:1px solid rgba(176,204,255,.14)}
.wk-track i{width:7px;height:7px;background:rgba(200,215,255,.22);flex:none}
.wk-track i.done{background:rgba(234,240,251,.7)}
.wk-track i.here{background:#fff;box-shadow:0 0 8px #fff,0 0 14px var(--wk-glow)}
.wk-track i.chest{width:11px;height:9px;background:#f1c593;box-shadow:0 0 8px rgba(241,197,147,.7)}
.wk-track i.chest.done{opacity:.35;box-shadow:none}
.wk-track i.fork{width:8px;height:8px;transform:rotate(45deg);background:#d9c8ff;box-shadow:0 0 8px rgba(217,200,255,.7)}
.wk-track i.fork.done{opacity:.4;box-shadow:none}
.wk-track i.gate{width:9px;height:13px;border-radius:5px 5px 0 0;background:linear-gradient(#fff,var(--gatec,#7aefec));box-shadow:0 0 10px var(--gatec,#7aefec)}
.wk-regen{font-size:11px;letter-spacing:.08em;color:var(--wk-ink2);text-shadow:0 1px 2px rgba(0,0,0,.9);height:14px}
/* what this land is for: its gift, and who lives here */
.wk-gift{display:flex;flex-direction:column;align-items:center;gap:3px;max-width:calc(100vw - 132px);text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.95),0 0 8px rgba(0,0,0,.7)}
.wk-gift b,.wk-gift span{display:block;max-width:100%;height:15px;line-height:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wk-gift b{font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--giftc,#e8dcff)}
.wk-gift b::before{content:"";display:inline-block;width:6px;height:6px;margin:0 7px 1px 0;background:currentColor;transform:rotate(45deg);box-shadow:0 0 6px currentColor}
.wk-gift span{font-size:10.5px;letter-spacing:.03em;color:#dfe6f6}

/* ---- the left column: your chests and your garden ---- */
.wk-side{position:absolute;left:max(12px,env(safe-area-inset-left,0px));top:var(--wk-top);z-index:6;display:flex;flex-direction:column;gap:8px}
.wk-btn{position:relative;width:48px;height:48px;border-radius:16px;display:grid;place-items:center;padding:0;cursor:pointer;color:var(--wk-ink);font:inherit;
  background:var(--wk-glass);border:1px solid var(--wk-rim);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 6px 18px rgba(0,0,0,.35);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);touch-action:manipulation}
.wk-btn canvas{width:40px;height:40px;image-rendering:pixelated}
.wk-btn:active{transform:scale(.94)}
.wk-btn:focus-visible{outline:3px solid #fff;outline-offset:2px}
.wk-chests.has{border-color:rgba(241,197,147,.7);box-shadow:0 0 16px rgba(241,197,147,.35),0 6px 18px rgba(0,0,0,.35)}
.wk-badge{position:absolute;right:-6px;top:-6px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;display:grid;place-items:center;font-size:11px;font-weight:700;color:#2b1a00;background:#ffd27a;box-shadow:0 0 10px rgba(255,210,122,.7)}

/* ---- the bottom: what a dash costs, and the odd hint ---- */
.wk-bottom{position:absolute;left:var(--wk-bx,50%);bottom:var(--wk-bottom);transform:translateX(-50%);width:min(250px,calc(100vw - 32px));z-index:5;display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none}
.wk-tag{font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--wk-ink2);text-shadow:0 1px 3px rgba(0,0,0,.9);height:16px}
.wk-tag.lv2{color:#ffd27a;text-shadow:0 0 10px rgba(255,210,122,.8),0 1px 2px #000}
.wk-hint{margin:0;font-size:12px;letter-spacing:.04em;color:var(--wk-ink);text-shadow:0 1px 3px rgba(0,0,0,.95),0 0 10px rgba(0,0,0,.7);min-height:16px;text-align:center;line-height:1.45}
.wk-hint button{font:inherit;color:var(--wk-glow);background:none;border:0;border-bottom:1px dashed rgba(122,239,236,.6);padding:0 0 1px;cursor:pointer;letter-spacing:inherit;pointer-events:auto;margin-left:4px}

/* ---- the lantern you carry is the button ---- */
.wk-lantern{position:absolute;z-index:4;left:-300px;top:0;border:0;background:transparent;border-radius:50%;cursor:pointer;touch-action:none;padding:0;outline:none}
.wk-lantern:focus-visible{box-shadow:0 0 0 3px #fff}
.wk-lantern svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);overflow:visible;pointer-events:none}
.wk-lantern circle{fill:none;stroke-width:3}
.wk-lantern .track{stroke:rgba(255,255,255,.08)}
.wk-lantern .fill{stroke:#7aefec;stroke-linecap:round;transition:stroke-dashoffset .3s ease,stroke .3s}
.wk-power{position:absolute;z-index:4;left:-300px;top:0;width:60px;height:60px;border-radius:50%;display:grid;place-content:center;justify-items:center;padding:0;cursor:pointer;font:inherit;color:var(--wk-ink);
  background:var(--wk-glass);border:1px solid var(--wk-rim);box-shadow:0 6px 18px rgba(0,0,0,.45);transition:opacity .3s,background .2s,color .2s,box-shadow .25s;touch-action:manipulation;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.wk-power b{font-size:19px;font-weight:700;line-height:1;letter-spacing:.02em;color:#ffd27a;text-shadow:0 0 10px rgba(255,210,122,.5)}
.wk-power span{font-size:10px;font-weight:700;letter-spacing:.12em;margin-top:3px;color:var(--wk-ink2)}
.wk-power[aria-pressed="true"]{background:radial-gradient(circle at 50% 32%,#fff6d6,#ffd27a 52%,#e8902e);border-color:#fff2c4;box-shadow:0 0 22px rgba(255,210,122,.75),0 0 48px rgba(255,160,70,.35)}
.wk-power[aria-pressed="true"] b,.wk-power[aria-pressed="true"] span{color:#3d1f00;text-shadow:none}
.wk-power[aria-pressed="true"]::after{content:'';position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(255,226,150,.75);animation:wk-pulse 1.3s ease-out infinite;pointer-events:none}
@keyframes wk-pulse{from{transform:scale(.94);opacity:.9}to{transform:scale(1.28);opacity:0}}
.wk-power.low:not([aria-pressed="true"]){opacity:.5}
.wk-power:focus-visible{outline:3px solid #fff;outline-offset:3px}

/* ---- your companion: the tap target over it, and its level and gift underneath ---- */
.wk-palhit{position:absolute;z-index:3;left:-300px;top:0;border:0;background:transparent;border-radius:40%;cursor:pointer;padding:0;touch-action:manipulation}
.wk-palhit:focus-visible{outline:3px solid #fff;outline-offset:2px}
.wk-pallabel{position:absolute;z-index:3;left:-300px;top:0;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:1px;pointer-events:none;--ab:#ffe08a;white-space:nowrap}
.wk-pallabel b{font-size:11px;font-weight:700;letter-spacing:.08em;color:#ffe08a;text-shadow:0 1px 2px #000,0 0 8px rgba(0,0,0,.8)}
.wk-pallabel span{font-size:10px;font-weight:700;letter-spacing:.04em;color:var(--ab);text-shadow:0 1px 2px #000,0 0 8px rgba(0,0,0,.8)}

/* ---- the reel: what you're heading for ---- */
.wk-reel{position:absolute;left:50%;top:var(--wk-band,29%);transform:translateX(-50%);z-index:5;opacity:0;pointer-events:none;display:none}
.wk-reel.on{display:block}
.wk-win{position:relative;width:min(260px,64vw);height:78px;overflow:hidden;border-radius:18px;background:rgba(8,12,30,.66);border:1px solid rgba(176,204,255,.22);box-shadow:0 10px 30px rgba(0,0,0,.45),inset 0 0 22px rgba(0,0,0,.5);
  -webkit-mask:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent);mask:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent)}
.wk-strip{position:absolute;left:0;top:7px;display:flex;gap:6px;will-change:transform}
.wk-tile{position:relative;width:60px;height:64px;flex:none;border-radius:12px;display:grid;place-items:center;background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 -3px 0 color-mix(in srgb,var(--kc) 55%,transparent)}
.wk-tile canvas{width:48px;height:48px;image-rendering:pixelated}
.wk-tile.won{background:color-mix(in srgb,var(--kc) 28%,rgba(8,12,30,.85));border-color:var(--kc);box-shadow:0 0 20px var(--kc),inset 0 0 12px color-mix(in srgb,var(--kc) 40%,transparent)}
.wk-tile .x10{position:absolute;right:-4px;top:-3px;padding:1px 5px;border-radius:8px;font-size:11px;font-weight:700;color:#3d1f00;background:#ffd27a;box-shadow:0 0 10px rgba(255,210,122,.8)}
.wk-mark{position:absolute;left:50%;top:5px;bottom:5px;width:66px;transform:translateX(-50%);border-radius:14px;border:2px solid rgba(255,255,255,.8);box-shadow:0 0 14px rgba(255,255,255,.35);pointer-events:none}
.wk-reel.pow .wk-win{border-color:rgba(255,210,122,.75);box-shadow:0 0 26px rgba(255,190,90,.45),0 10px 30px rgba(0,0,0,.45),inset 0 0 22px rgba(0,0,0,.5)}
.wk-reel.pow .wk-mark{border-color:#ffe6a8;box-shadow:0 0 18px rgba(255,210,122,.7)}
.wk-rlabel{margin-top:8px;text-align:center;font-weight:700;font-size:18px;letter-spacing:.14em;text-transform:uppercase;text-shadow:0 2px 0 rgba(0,0,0,.65),0 0 14px currentColor;min-height:22px;white-space:nowrap}

/* ---- forks: a card hangs over each road ---- */
.wk-forks{position:absolute;left:0;right:0;top:var(--wk-band,29%);z-index:6;pointer-events:none;display:flex;justify-content:center;gap:14px;padding:0 16px}
.wk-fk{position:relative;flex:0 1 136px;min-width:0;padding:10px 8px 9px;border-radius:16px;display:flex;flex-direction:column;align-items:center;gap:3px;background:rgba(8,12,30,.78);border:1px solid color-mix(in srgb,var(--kc) 65%,transparent);
  box-shadow:0 0 24px color-mix(in srgb,var(--kc) 32%,transparent),0 10px 28px rgba(0,0,0,.5);color:var(--wk-ink);font:inherit;cursor:pointer;pointer-events:auto;will-change:transform;touch-action:manipulation}
.wk-fk canvas{width:48px;height:48px;image-rendering:pixelated}
.wk-fk b{font-size:13px;font-weight:700;letter-spacing:.03em;color:var(--kc);text-align:center}
.wk-fk small{font-size:10px;font-weight:700;letter-spacing:.08em;color:var(--wk-ink2)}
.wk-fk .x10{display:none;position:absolute;right:-6px;top:-8px;padding:1px 6px;border-radius:8px;font-size:11px;font-weight:700;color:#3d1f00;background:#ffd27a;box-shadow:0 0 10px rgba(255,210,122,.8)}
.wk-fk.pow .x10{display:block}
.wk-fk.pow{border-color:rgba(255,210,122,.8)}
.wk-fk:focus-visible{outline:3px solid #fff;outline-offset:3px}

/* ---- pops, the fade, the land card ---- */
.wk-pops{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:8}
.wk-pop{position:absolute;left:0;top:0;font-weight:700;letter-spacing:.08em;white-space:nowrap;text-shadow:0 2px 0 rgba(6,8,22,.9),0 -1px 0 rgba(6,8,22,.6),0 0 14px currentColor;will-change:transform,opacity}
.wk-fade{position:absolute;inset:0;pointer-events:none;opacity:0;background:#fff;z-index:10}
.wk-landcard{position:absolute;inset:0;z-index:11;display:grid;place-items:center;text-align:center;pointer-events:none;opacity:0;padding:0 16px}
.wk-landcard .k{font-size:12px;font-weight:700;letter-spacing:.4em;text-transform:uppercase;color:var(--wk-ink2);text-shadow:0 1px 3px #000}
.wk-landcard h2{margin:12px 0 0;font-size:clamp(28px,9vw,58px);font-weight:700;letter-spacing:.16em;text-transform:uppercase;text-wrap:balance;line-height:1.05;color:#fff;text-shadow:0 0 34px var(--landc,#7aefec),0 4px 0 rgba(0,0,0,.45)}
.wk-landcard p{margin:14px auto 0;max-width:30ch;font-size:14px;letter-spacing:.04em;line-height:1.45;color:#eef3fc;text-shadow:0 1px 4px #000,0 0 18px rgba(0,0,0,.8)}

/* ---- the catch: a screen of its own, over everything ---- */
.wk-over{color:#eef3fc;--tier:#b9c6d6;--tierA:#ffffff}
.wk-reveal{position:fixed;inset:0;z-index:60;pointer-events:none;display:none;-webkit-user-select:none;user-select:none;touch-action:none}
.wk-reveal.on{display:block;pointer-events:auto;cursor:pointer}
body.wk-revealing #walk-layer .wk-gl{position:fixed;z-index:59}
/* build 238: the bars fade away for a reveal and back after it, rather than blinking */
body.walk-home :is(.topbar,.bottom-nav){transition:opacity .28s ease-out,visibility 0s linear 0s}
html body.wk-revealing :is(.topbar,.bottom-nav,.home-strip,.event-banner,.welcome-card){visibility:hidden;opacity:0;transition:opacity .2s ease-in,visibility 0s linear .2s}
@media (prefers-reduced-motion:reduce){body.walk-home :is(.topbar,.bottom-nav),html body.wk-revealing :is(.topbar,.bottom-nav,.home-strip,.event-banner,.welcome-card){transition:none}}
.wk-slam{position:absolute;left:50%;top:22%;transform:translate(-50%,-50%);font-weight:700;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;opacity:0;text-shadow:0 0 26px currentColor,0 4px 0 rgba(0,0,0,.55)}
.wk-info{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 26px);display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;opacity:0;padding:0 16px}
.wk-kick{font-size:12px;font-weight:700;letter-spacing:.34em;text-transform:uppercase;color:var(--tierA);text-shadow:0 0 12px var(--tier),0 1px 2px #000}
.wk-name{margin:0;font-size:clamp(26px,8vw,44px);font-weight:700;letter-spacing:.16em;text-transform:uppercase;line-height:1.05;text-wrap:balance;max-width:92vw;color:#fff;text-shadow:0 0 22px var(--tier),0 3px 0 rgba(0,0,0,.5)}
.wk-rar{display:flex;justify-content:center;align-items:center;gap:9px}
.wk-pips{display:flex;gap:4px}
.wk-pips i{width:15px;height:19px;background:var(--tier);opacity:0;filter:drop-shadow(0 0 6px var(--tier));
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 15' shape-rendering='crispEdges'%3E%3Cpath d='M5 0h2v2h1v2h2v2h1v6h-1v2H8v1H4v-1H2v-2H1V6h1V4h2V2h1z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 15' shape-rendering='crispEdges'%3E%3Cpath d='M5 0h2v2h1v2h2v2h1v6h-1v2H8v1H4v-1H2v-2H1V6h1V4h2V2h1z'/%3E%3C/svg%3E") center/contain no-repeat}
.wk-rarname{font-size:13px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--tierA);text-shadow:0 0 10px var(--tier),0 1px 2px #000}
.wk-note{margin:0;color:#eef3fc;font-size:12px;letter-spacing:.05em;line-height:1.45;max-width:36ch;text-shadow:0 1px 3px #000}
.wk-note b{color:#ffe08a}
.wk-go{margin-top:6px;width:min(320px,calc(100vw - 48px));height:52px;border-radius:16px;border:0;cursor:pointer;font:inherit;font-weight:700;font-size:15px;letter-spacing:.2em;text-transform:uppercase;color:#0b1130;
  background:linear-gradient(180deg,var(--tierA),var(--tier));box-shadow:0 0 28px color-mix(in srgb,var(--tier) 65%,transparent),inset 0 -3px 0 rgba(0,0,0,.2);opacity:0}
.wk-go:focus-visible{outline:3px solid #fff;outline-offset:3px}
.wk-skip{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 22px);text-align:center;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#aebbd6;opacity:.7}
.wk-badge2{display:inline-block;padding:3px 8px 2px;border-radius:6px;font-size:11px;font-weight:700;letter-spacing:.18em;background:var(--tierA);color:#0b1130;box-shadow:0 0 16px var(--tier)}

/* ---- choosing who walks with you: a sheet from the bottom ---- */
.wk-picker{position:fixed;inset:0;z-index:58;background:rgba(4,6,18,.74);display:grid;align-items:end;justify-items:center;touch-action:pan-y}
.wk-picker[hidden]{display:none}
.wk-pk{position:relative;width:min(560px,100%);max-height:86vh;overflow:auto;background:linear-gradient(180deg,rgba(26,32,70,.98),rgba(10,13,32,.99));border:1px solid rgba(176,204,255,.22);border-bottom:0;border-radius:24px 24px 0 0;
  padding:20px max(16px,env(safe-area-inset-right,0px)) calc(env(safe-area-inset-bottom,0px) + 18px) max(16px,env(safe-area-inset-left,0px));box-shadow:0 -20px 60px rgba(0,0,0,.5);color:#eef3fc}
.wk-pk h2{margin:0;font-size:18px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.wk-sub{margin:8px 0 0;max-width:48ch;color:#aebbd6;font-size:12px;line-height:1.5}
.wk-pkgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:16px}
.wk-pc{text-align:left;display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:10px;align-content:start;padding:10px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);color:#eef3fc;font:inherit;cursor:pointer;min-width:0;--ab:#ffe08a}
.wk-pc.on{border-color:var(--ab);box-shadow:0 0 0 1px var(--ab),0 0 22px color-mix(in srgb,var(--ab) 38%,transparent);background:color-mix(in srgb,var(--ab) 12%,rgba(255,255,255,.03))}
.wk-pc:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* out on a quest: it can't walk the road right now, and its card says when it's back */
.wk-pc.away{opacity:.55;cursor:default}
.wk-pc.away .wk-pcart canvas{filter:grayscale(.7) brightness(.85)}
.wk-pc.away .wk-pce{color:#ffd27a}
.wk-pknote{margin:8px 0 0;padding:8px 12px;border-radius:12px;font-size:12px;line-height:1.45;color:#ffe9b8;background:rgba(255,210,122,.1);border:1px solid rgba(255,210,122,.3)}
.wk-pknote[hidden]{display:none}
.wk-pcart{grid-row:1 / span 4;display:grid;place-items:center;width:56px;height:56px;border-radius:12px;background:radial-gradient(circle,color-mix(in srgb,var(--ab) 32%,transparent),transparent 70%)}
.wk-pcart canvas{width:56px;height:56px;image-rendering:pixelated}
.wk-pcn{font-weight:700;font-size:12px;letter-spacing:.05em;overflow-wrap:anywhere}
.wk-pcl{font-size:11px;color:#ffe08a;font-weight:700;letter-spacing:.08em}
.wk-pca{font-size:10px;font-weight:700;color:var(--ab);letter-spacing:.08em;text-transform:uppercase;margin-top:3px}
.wk-pce{font-size:11px;color:#aebbd6;line-height:1.35;margin-top:2px}
.wk-pkrow{display:flex;gap:10px;margin-top:14px}
.wk-pkrow button{flex:1;height:44px;border-radius:14px;border:1px solid rgba(176,204,255,.22);background:rgba(255,255,255,.05);color:#eef3fc;font:inherit;font-size:12px;letter-spacing:.08em;cursor:pointer}
.wk-pkgo{margin-top:12px;width:100%;height:50px;border-radius:15px;border:0;cursor:pointer;font:inherit;font-weight:700;font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:#0b1130;background:linear-gradient(180deg,#fff2c4,#ffd27a);box-shadow:0 0 24px rgba(255,210,122,.45)}
.wk-pkx{position:absolute;right:14px;top:14px;width:40px;height:40px;border-radius:50%;border:1px solid rgba(176,204,255,.22);background:rgba(255,255,255,.06);color:#eef3fc;font:inherit;font-size:18px;cursor:pointer}
.wk-pk button:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* ---- Road or Garden (build 238): one line, the road · your pals · the chest ----
   No switch at the top any more. On the road a Garden arrow sits at the right edge, where a swipe to
   the left takes you; in the garden the first pal's left arrow is the Road. Both grow as a finger
   pulls toward them, so where a swipe goes is plain before you let go. */
.wk-togarden{position:absolute;right:max(10px,env(safe-area-inset-right,0px));top:var(--wk-mid,44%);z-index:6;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:0;border:0;background:none;color:var(--wk-ink);font:inherit;cursor:pointer;transition:opacity .25s;-webkit-tap-highlight-color:transparent}
.wk-togarden i{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:rgba(12,14,34,.42);border:1px solid rgba(176,204,255,.24);
  box-shadow:0 6px 16px rgba(0,0,0,.3);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background .2s,box-shadow .2s}
.wk-togarden svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wk-togarden span{font-size:11px;letter-spacing:.08em;color:var(--wk-ink2);text-shadow:0 1px 3px rgba(0,0,0,.9)}
.wk-togarden:active i,.wk-togarden.is-pulled i{background:rgba(255,224,138,.22);box-shadow:0 0 18px rgba(255,214,140,.45)}
.wk-togarden:focus-visible{outline:none}.wk-togarden:focus-visible i{outline:2px solid #fff;outline-offset:2px}
#walk-layer.wk-choosing .wk-togarden,body.wk-revealing .wk-togarden,body.welcoming #walk-layer .wk-togarden{opacity:0;pointer-events:none}
/* the garden's way back: the first pal's left arrow, with its name under it */
.stage-arrow .edge-label{display:none}
.stage-arrow.to-road .edge-label{display:block;position:absolute;left:50%;top:calc(100% + 6px);transform:translateX(-50%);font-size:11px;letter-spacing:.08em;line-height:1;white-space:nowrap;pointer-events:none;color:#fff;text-shadow:0 1px 3px rgba(10,20,60,.75),0 0 8px rgba(10,20,60,.35)}
.stage-arrow.to-road{transition:scale .18s cubic-bezier(.2,.9,.3,1)}
.stage-arrow.to-road.is-pulled{box-shadow:0 0 0 2px rgba(255,214,140,.7),0 0 18px rgba(255,214,140,.45)!important}

/* ---- the gate card ---- */
.wk-gate{position:absolute;left:50%;top:var(--wk-band,30%);transform:translateX(-50%);z-index:7;width:min(340px,calc(100vw - 32px));padding:16px 16px 14px;border-radius:20px;text-align:center;
  background:linear-gradient(180deg,rgba(18,22,52,.9),rgba(8,10,28,.92));border:1px solid color-mix(in srgb,var(--gc,#c8b1ff) 55%,transparent);
  box-shadow:0 0 30px color-mix(in srgb,var(--gc,#c8b1ff) 28%,transparent),0 14px 40px rgba(0,0,0,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.wk-gate[hidden]{display:none}
/* At the gate you step up to the portal: it stays in view, and the card takes the lantern's place below it. */
#walk-layer .wk-gate{top:auto;bottom:calc(var(--wk-nav,84px) + 12px)}
#walk-layer.wk-gating :is(.wk-lantern,.wk-power,.wk-bottom,.wk-pallabel,.wk-palhit){opacity:0;pointer-events:none;transition:opacity .2s}
.wk-gk{margin:0;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--gc,#c8b1ff)}
.wk-gate h3{margin:6px 0 0;font-size:18px;font-weight:700;letter-spacing:.06em;color:#fff;text-wrap:balance}
.wk-gfam{margin:6px 0 0;font-size:12px;color:#d9e2f5;line-height:1.45}
.wk-ggift{margin:6px 0 0;font-size:12px;color:#aebbd6;line-height:1.45}
.wk-ggift b{color:var(--gc,#c8b1ff);font-weight:700}
.wk-gclear{margin:8px 0 0;font-size:12px;color:#ffe08a;line-height:1.45}
.wk-gbtns{display:flex;gap:10px;margin-top:14px}
.wk-gbtns button{flex:1;min-height:46px;padding:6px 10px;border-radius:14px;font:inherit;font-size:13px;letter-spacing:.04em;cursor:pointer;line-height:1.25}
.wk-gstay{color:#eef3fc;background:rgba(255,255,255,.06);border:1px solid rgba(176,204,255,.25)}
.wk-ggo{color:#0b1130;font-weight:700;border:0;background:linear-gradient(180deg,#fff,color-mix(in srgb,var(--gc,#c8b1ff) 70%,#fff));box-shadow:0 0 18px color-mix(in srgb,var(--gc,#c8b1ff) 45%,transparent)}
.wk-gbtns button:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* ---- while a fork or the gate is up, the side buttons step back ---- */
#walk-layer .wk-side,body.walk-home .home-strip,body.walk-home .event-banner{transition:opacity .25s}
#walk-layer.wk-choosing .wk-side,body.walk-home.wk-choosing .home-strip,body.walk-home.wk-choosing .event-banner{opacity:0;pointer-events:none}

/* ---- the land card says who lives there and what its road gives ---- */
.wk-lcx{display:flex;flex-direction:column;gap:6px;margin-top:14px;font-size:13px;letter-spacing:.03em;line-height:1.45;text-shadow:0 1px 4px #000,0 0 14px rgba(0,0,0,.8)}
.wk-lcx .fam{color:#fff}
.wk-lcx .gift{color:var(--landc,#c8b1ff);max-width:34ch;margin:0 auto}

/* ---- the energy sheet ---- */
.energy-dialog{width:min(460px,calc(100vw - 24px))}
.energy-dialog .en-big{display:flex;align-items:center;gap:14px;margin:6px 0 4px}
.energy-dialog .en-big canvas{width:28px;height:40px;image-rendering:pixelated}
.energy-dialog .en-num{font-size:34px;font-weight:700;color:#7aefec;text-shadow:0 0 16px rgba(122,239,236,.5);font-variant-numeric:tabular-nums}
.energy-dialog .en-num small{font-size:14px;color:var(--muted,#a1a2a7);text-shadow:none;margin-left:4px}
.energy-dialog .en-clock{margin:0;color:var(--muted,#a1a2a7);font-size:12px;line-height:1.5}
.energy-dialog .en-list{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.energy-dialog .en-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;align-items:center;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.energy-dialog .en-list b{font-weight:700;font-size:13px}
.energy-dialog .en-list span{font-size:12px;color:#7aefec;font-variant-numeric:tabular-nums;white-space:nowrap}
.energy-dialog .en-list small{grid-column:1 / -1;font-size:11px;color:var(--muted,#a1a2a7);line-height:1.4}
.energy-dialog .en-meter{grid-column:1 / -1;height:4px;border-radius:2px;background:rgba(122,239,236,.12);overflow:hidden}
.energy-dialog .en-meter i{display:block;height:100%;background:#7aefec}
.energy-dialog .en-day{margin:14px 0 0;font-size:12px;color:var(--muted,#a1a2a7);line-height:1.5}
.energy-dialog .en-actions{display:flex;gap:10px;margin-top:16px}
.energy-dialog .en-actions>*{flex:1}

@media (prefers-reduced-motion: reduce){
  .wk-power[aria-pressed="true"]::after{animation:none;opacity:.6}
  #walk-layer>*{transition:none}
}
@media (max-height:700px){
  .wk-landcard h2{font-size:clamp(24px,8vw,48px)}
}

/* ---- the first night's tour card sits up top on the road, out of the lantern's way ---- */
body.walk-home .welcome-card{top:calc(var(--wk-top) - 8px);bottom:auto;transform:translate(-50%,-12px)}
body.walk-home .welcome-card.is-in{transform:translate(-50%,0)}
body.walk-home .welcome-card.is-out{transform:translate(-50%,-10px)}
body.walk-home.welcoming .wk-head{opacity:0}

/* ---- the cloud swipe between the road and the garden (cloudswipe.js) ---- */
.cloud-swipe{position:fixed;inset:0;z-index:2000;pointer-events:auto;touch-action:none}
.cloud-swipe-cv{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges}
.cloud-swipe.soft{background:radial-gradient(120% 90% at 50% 40%,#f4f0ff,#d9d0f2 60%,#b3a6e0);opacity:0}
/* a short phone: the gate card keeps to what matters so the portal stays in view */
@media (max-height:740px){
  #walk-layer .wk-gate{padding:12px 14px 12px}
  .wk-gate h3{font-size:16px}
  .wk-ggift span{display:none}
  .wk-gclear{margin-top:6px}
  .wk-gbtns{margin-top:10px}
  .wk-gbtns button{min-height:42px}
}

/* the journal's label stays on one line, however narrow the row */
html body #journal-home-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;max-width:100%}

/* ---- caves, ruins and castles: the track mark, and the fight inside (den.js) ---- */
.wk-track i.den{width:10px;height:10px;background:linear-gradient(#c8b1ff,#7d6fb8);clip-path:polygon(0 100%,0 35%,20% 35%,20% 0,40% 0,40% 35%,60% 35%,60% 0,80% 0,80% 35%,100% 35%,100% 100%);box-shadow:none}
.wk-track i.den.done{opacity:.4}
body.wk-inside :is(.topbar,.bottom-nav,.home-strip,.event-banner,.welcome-card){visibility:hidden!important}
body.wk-inside #walk-layer :is(.wk-head,.wk-side,.wk-togarden,.wk-lantern,.wk-power,.wk-bottom,.wk-pallabel,.wk-palhit,.wk-reel,.wk-forks,.wk-gate){visibility:hidden!important}
.wk-den{position:absolute;inset:0;z-index:12;pointer-events:auto;touch-action:none;-webkit-user-select:none;user-select:none}
.wk-den[hidden]{display:none}
.dn-card{position:absolute;width:min(232px,60vw);padding:10px 12px 11px;border-radius:16px;background:linear-gradient(180deg,rgba(20,22,52,.88),rgba(8,10,28,.9));border:1px solid rgba(176,204,255,.22);box-shadow:0 10px 28px rgba(0,0,0,.45);pointer-events:none}
.dn-foe{left:max(14px,env(safe-area-inset-left,0px));top:calc(env(safe-area-inset-top,0px) + 58px)}
.dn-you{right:max(14px,env(safe-area-inset-right,0px));bottom:calc(env(safe-area-inset-bottom,0px) + 132px)}
.dn-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.dn-name{font-size:14px;font-weight:700;letter-spacing:.06em;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dn-lv{font-size:11px;letter-spacing:.04em;color:#aebbd6;white-space:nowrap}
.dn-sub{margin-top:3px;font-size:11px;color:#aebbd6;letter-spacing:.03em}
.dn-sub em{font-style:normal;margin-left:4px;padding:1px 6px;border-radius:6px;background:rgba(255,210,122,.16);color:#ffd27a;font-weight:700}
.dn-hp{position:relative;height:9px;margin-top:7px;border-radius:3px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);overflow:hidden}
.dn-hp i,.dn-hp u{position:absolute;inset:0;transform-origin:0 50%}
.dn-hp u{background:#ff8a96;opacity:.55;transition:transform .9s cubic-bezier(.3,.7,.3,1) .25s}
.dn-hp i{background:linear-gradient(90deg,#46c46c,#8ef0a0);transition:transform .32s ease-out,background .3s}
.dn-hpn{margin-top:4px;font-size:11px;text-align:right;color:#cfd6ea;font-variant-numeric:tabular-nums}
.dn-title{position:absolute;left:50%;top:22%;transform:translateX(-50%);width:min(340px,calc(100vw - 32px));text-align:center;pointer-events:none;opacity:0}
.dn-title small{display:block;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:#c8b1ff;text-shadow:0 1px 3px #000}
.dn-title b{display:block;margin-top:6px;font-size:clamp(20px,6vw,28px);letter-spacing:.08em;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.5),0 0 22px rgba(0,0,0,.6);text-wrap:balance}
.dn-title.on{animation:dn-title 2.1s ease-out both}
@keyframes dn-title{0%{opacity:0;transform:translate(-50%,10px)}14%{opacity:1;transform:translate(-50%,0)}78%{opacity:1}100%{opacity:0;transform:translate(-50%,-6px)}}
.dn-ring{position:absolute;width:0;height:0;pointer-events:none;opacity:0;transition:opacity .12s}
.dn-ring.on{opacity:1}
.dn-ring i{position:absolute;left:0;top:0;width:118px;height:118px;border-radius:50%;transform:translate(-50%,-50%)}
.dn-goal{border:3px dashed rgba(255,255,255,.45)}
.dn-close{border:4px solid #ffd27a;box-shadow:0 0 14px rgba(255,210,122,.6),inset 0 0 10px rgba(255,210,122,.35)}
.dn-ring.theirs .dn-close{border-color:#7aefec;box-shadow:0 0 14px rgba(122,239,236,.6),inset 0 0 10px rgba(122,239,236,.35)}
.dn-ring.big .dn-close{border-color:#ff8a96;box-shadow:0 0 18px rgba(255,138,150,.7)}
.dn-hint{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 112px);transform:translateX(-50%);margin:0;width:min(300px,calc(100vw - 32px));text-align:center;font-size:13px;letter-spacing:.04em;color:#eef3fc;text-shadow:0 1px 3px #000,0 0 12px rgba(0,0,0,.8);pointer-events:none;min-height:18px}
.dn-trick{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 18px);transform:translateX(-50%);width:84px;height:84px;border-radius:50%;display:grid;place-items:center;align-content:center;gap:4px;padding:0;
  font:inherit;color:#ffe9b8;background:radial-gradient(circle at 50% 38%,rgba(255,210,122,.22),rgba(14,14,36,.92) 68%);border:2px solid rgba(255,210,122,.35);box-shadow:0 8px 24px rgba(0,0,0,.5);cursor:pointer;transition:opacity .2s,box-shadow .25s,border-color .25s}
.dn-trick:disabled{opacity:.55;cursor:default}
.dn-trick b{font-size:10px;letter-spacing:.18em;text-transform:uppercase}
.dn-lamp{width:16px;height:20px;border-radius:3px 3px 5px 5px;background:linear-gradient(#ffe9b8,#f2b860);box-shadow:0 0 0 2px #3b3058}
.dn-trick:disabled .dn-lamp{background:#5b5794}
.dn-pips{display:flex;gap:3px}.dn-pips i{width:7px;height:7px;border-radius:2px;background:rgba(255,255,255,.15)}.dn-pips i.on{background:#ffd27a;box-shadow:0 0 6px #ffd27a}
.dn-trick.ready{opacity:1;border-color:#ffd27a;animation:dn-ready 1.1s ease-in-out infinite}
.dn-trick.queued{border-color:#fff;box-shadow:0 0 0 4px rgba(255,210,122,.45),0 0 26px rgba(255,210,122,.6)}
@keyframes dn-ready{0%,100%{box-shadow:0 0 0 0 rgba(255,210,122,.5),0 8px 24px rgba(0,0,0,.5)}50%{box-shadow:0 0 0 10px rgba(255,210,122,0),0 8px 24px rgba(0,0,0,.5)}}
.dn-leave{position:absolute;right:max(14px,env(safe-area-inset-right,0px));top:calc(env(safe-area-inset-top,0px) + 14px);height:36px;padding:0 14px;border-radius:999px;font:inherit;font-size:12px;letter-spacing:.08em;color:#cfd6ea;background:rgba(10,15,36,.72);border:1px solid rgba(176,204,255,.22);cursor:pointer}
.dn-leave[hidden],.wk-den.dn-over .dn-leave{display:none}
.dn-end{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 24px);transform:translateX(-50%);width:min(340px,calc(100vw - 32px));padding:16px;border-radius:20px;text-align:center;background:linear-gradient(180deg,rgba(18,22,52,.94),rgba(8,10,28,.95));border:1px solid rgba(200,177,255,.4);box-shadow:0 0 30px rgba(200,177,255,.2),0 14px 40px rgba(0,0,0,.55);z-index:2}
.dn-end[hidden]{display:none}
.dn-ek{margin:0;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:#c8b1ff}
.dn-end h3{margin:6px 0 0;font-size:19px;letter-spacing:.05em;color:#fff;text-wrap:balance}
.dn-el{margin:8px 0 0;font-size:12px;line-height:1.5;color:#d9e2f5}
.dn-eb{display:flex;gap:10px;margin-top:14px}
.dn-eb button{flex:1;min-height:46px;border-radius:14px;font:inherit;font-size:13px;letter-spacing:.04em;cursor:pointer}
.dn-out{color:#eef3fc;background:rgba(255,255,255,.06);border:1px solid rgba(176,204,255,.25)}
.dn-out[hidden]{display:none}
.dn-on{color:#0b1130;font-weight:700;border:0;background:linear-gradient(180deg,#fff6dc,#ffd27a);box-shadow:0 0 18px rgba(255,210,122,.4)}
.wk-den.dn-over .dn-trick,.wk-den.dn-over .dn-hint{opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){.dn-trick.ready{animation:none}.dn-title.on{animation:none;opacity:1}}
body.wk-inside #home,body.wk-inside #home *{pointer-events:none!important}

.wk-den.dn-over .dn-you{opacity:0;transition:opacity .25s}
/* during a catch the canvas lifts above everything; its flash and edges go with it, under the catch's own words */
body.wk-revealing #walk-layer.wk-lite :is(.wk-vig,.wk-flash){position:fixed;z-index:59}