/* ============================================================================
   Departures — the boarding-pass wallet. (2026-10-09)  See js/dep-wallet.js.
   Everything is scoped under body.dep-wallet, so ?wallet=0 matches nothing.
   ============================================================================ */

body.dep-wallet {
    --dw-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --dw-ground: #e9e3d6;
    --dw-amber: #ffcf3d;
    --dw-bottom: calc(var(--safe-bottom, 0px) + 56px);
    --dw-top: calc(var(--header-height, 72px) + var(--safe-top, 0px));
}

/* ── the HUD button wears the wallet ────────────────────────────────── */
body.dep-wallet #dep-hud-btn svg { display: none; }
body.dep-wallet #dep-hud-btn { padding-left: 10px; gap: 10px; }
body.dep-wallet #dep-hud-btn .dw-stk { position: relative; width: 26px; height: 22px; flex: none; }
body.dep-wallet #dep-hud-btn .dw-stk i { position: absolute; left: 0; right: 0; height: 12px; border-radius: 3.5px; }
body.dep-wallet #dep-hud-btn .dw-stk i:nth-child(1) { top: 0; background: #d35400; transform: scale(.8); }
body.dep-wallet #dep-hud-btn .dw-stk i:nth-child(2) { top: 5px; background: #5b3f8c; transform: scale(.9); }
body.dep-wallet #dep-hud-btn .dw-stk i:nth-child(3) { top: 10px; background: #1a1a1a; }
body.dep-wallet.dep-wallet-open #dep-hud-btn .dw-stk i:nth-child(3) { background: #fff; }
body.dep-wallet.dep-wallet-open #dep-hud-btn { background: #1a1a1a; color: #fff; }
body.dep-wallet.dep-wallet-open #dep-hud-btn .dt-cnt { color: rgba(255, 255, 255, 0.6); }
/* FIND opens the tracker at its detail level only — the cadence pills belong
   to the old list, which the user didn't come from. */
body.dep-hud-find #dep-tracker .dt-head { display: none; }

/* The top-right occasion cards were the tracker's way of saying "today's
   stamps" — every one of them is now a pass in the wallet, so showing both
   put the same stamp on screen twice. */
body.dep-wallet #dep-occs, body.dep-wallet #dep-occ-stubs { display: none !important; }

/* ── the wallet sheet ───────────────────────────────────────────────── */
body.dep-wallet #dep-wallet {
    position: fixed;
    left: 0; right: 0;
    top: var(--dw-top);
    bottom: var(--dw-bottom);
    z-index: 30;
    background: var(--dw-ground);
    display: flex;
    flex-direction: column;
    transform: translateY(102%);
    visibility: hidden;
    transition: transform 380ms var(--dw-ease), visibility 0s linear 380ms;
    font-family: var(--font-ui, 'Figtree', sans-serif);
    color: #1a1a1a;
}
body.dep-wallet.dep-wallet-open #dep-wallet {
    transform: none;
    visibility: visible;
    transition: transform 380ms var(--dw-ease), visibility 0s;
}
body.dep-wallet.dep-wallet-open #dep-hud-btn { z-index: 31; }
.dw-scope .dw-h { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 4px; }
.dw-scope .dw-h b { font-family: var(--font-display, 'Archivo Black', sans-serif); font-weight: 400; font-size: 20px; }
.dw-scope .dw-x {
    width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .07);
    font-size: 14px; color: #1a1a1a; cursor: pointer;
}
.dw-scope .dw-sub { padding: 0 16px 10px; font-size: 12px; color: rgba(26, 26, 26, .6); }
.dw-scope .dw-tabs { display: flex; gap: 6px; padding: 0 16px 12px; }
.dw-scope .dw-tabs button {
    border: 0; cursor: pointer; font: 800 11px var(--font-ui, 'Figtree', sans-serif); letter-spacing: .06em;
    padding: 7px 12px; border-radius: 100px; background: rgba(0, 0, 0, .06); color: rgba(26, 26, 26, .55);
}
.dw-scope .dw-tabs button.on { background: #1a1a1a; color: #fff; }
.dw-scope .dw-stack {
    flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 10px 14px calc(42px + 40px);   /* clear of the HUD button */
}
.dw-scope .dw-empty { text-align: center; padding: 48px 24px; color: rgba(26, 26, 26, .6); font-size: 13.5px; line-height: 1.5; }

/* ── a boarding pass ────────────────────────────────────────────────── */
.dw-scope .dw-bp {
    position: relative; border-radius: 16px; color: #fff; background: var(--c1); cursor: pointer;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, .12);
    margin-top: -52px;
    transition: opacity .3s;
    /* Each pass is its own layer, so the next pass in the pile covers ALL of
       it. Without this a skinned pass's rows (z-index 1) and stamp (2) drew
       over the pass below: its YOU → code line showed through (2026-10-21). */
    isolation: isolate;
}
.dw-scope .dw-bp:first-child { margin-top: 0; }
.dw-scope .dw-bp.open { margin-bottom: 62px; box-shadow: 0 10px 24px rgba(0, 0, 0, .22); cursor: default; }
.dw-scope .dw-bp.open:last-child { margin-bottom: 0; }
.dw-scope .dw-stack.has-open .dw-bp:not(.open) { opacity: .9; }
.dw-scope .dw-bp.upcoming { filter: saturate(.55); }

.dw-scope .dw-top { padding: 12px 100px 10px 14px; min-height: 62px; }
.dw-scope .dw-air { font: 800 9.5px var(--font-mono, 'JetBrains Mono', monospace); letter-spacing: .14em; opacity: .8; }
.dw-scope .dw-ttl { font-family: var(--font-display, 'Archivo Black', sans-serif); font-size: 17px; line-height: 1.12; margin-top: 3px; }
/* Stacked, a pass shows one line of title; opening it shows the rest. */
.dw-scope .dw-stack .dw-bp:not(.open) .dw-ttl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dw-scope .dw-stp {
    position: absolute; right: 8px; top: -8px; width: 88px; height: 88px; object-fit: contain;
    transform: rotate(7deg); filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .35)); pointer-events: none;
}
.dw-scope .dw-coin.dw-stp { right: 14px; top: 4px; width: 72px; height: 72px; transform: none; filter: none; }
.dw-scope .dw-pin, .dw-scope .dw-final, .dw-scope .dw-arrives, .dw-scope .dw-ready, .dw-scope .dw-stamped {
    position: absolute; top: -8px; left: 12px; z-index: 1;
    font: 800 8.5px var(--font-mono, 'JetBrains Mono', monospace); letter-spacing: .1em;
    padding: 3px 7px; border-radius: 6px;
}
.dw-scope .dw-pin { background: #fff; color: #1a1a1a; }
.dw-scope .dw-ready { background: var(--dw-amber); color: #1a1a1a; }
.dw-scope .dw-final { background: #e74c3c; color: #fff; animation: dwBlink 1.2s steps(2) infinite; }
.dw-scope .dw-arrives { background: #FFD93D; color: #1a1a1a; border-radius: 100px; padding: 3px 9px; }
.dw-scope .dw-stamped { left: auto; right: 8px; top: 62px; background: #27ae60; color: #fff; transform: rotate(-6deg); }
@keyframes dwBlink { 50% { opacity: .5; } }

.dw-scope .dw-route { display: flex; align-items: center; gap: 10px; padding: 2px 14px 12px; }
.dw-scope .dw-route > div:not(.dw-ln) {
    font-family: var(--font-display, 'Archivo Black', sans-serif); font-size: 26px; letter-spacing: .02em; line-height: 1;
}
.dw-scope .dw-route small {
    display: block; font: 600 8.5px var(--font-mono, 'JetBrains Mono', monospace); letter-spacing: .1em; opacity: .75; margin-top: 3px;
    white-space: nowrap;
}
.dw-scope .dw-to { text-align: right; }
.dw-scope .dw-ln { flex: 1; height: 0; border-top: 2px dashed rgba(255, 255, 255, .45); position: relative; }
.dw-scope .dw-ln::after {
    content: '✈'; position: absolute; top: -11px; font-size: 14px;
    left: calc(var(--pct, 0) * 1% - 8px);
}
.dw-scope .dw-flds { display: none; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 0 14px 12px; }
.dw-scope .dw-flds div { font: 700 12px var(--font-ui, 'Figtree', sans-serif); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dw-scope .dw-flds small { display: block; font: 600 8px var(--font-mono, 'JetBrains Mono', monospace); letter-spacing: .12em; opacity: .65; margin-bottom: 2px; }
.dw-scope .dw-perf { position: relative; height: 0; border-top: 2px dashed rgba(255, 255, 255, .35); margin: 0 10px; }
.dw-scope .dw-perf::before, .dw-scope .dw-perf::after {
    content: ''; position: absolute; top: -10px; width: 18px; height: 18px; border-radius: 50%; background: var(--dw-ground);
}
.dw-scope .dw-perf::before { left: -19px; }
.dw-scope .dw-perf::after { right: -19px; }
.dw-scope .dw-stub { display: none; padding: 12px 14px 14px; background: rgba(0, 0, 0, .12); border-radius: 0 0 16px 16px; }
.dw-scope .dw-bp.open .dw-stub { display: block; }
.dw-scope .dw-bp.open .dw-flds { display: grid; }

.dw-scope .dw-reward { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.dw-scope .dw-reward span { font: 700 11px var(--font-ui, 'Figtree', sans-serif); background: rgba(255, 255, 255, .16); padding: 5px 10px; border-radius: 100px; }
.dw-scope .dw-lock { font-size: 12px; opacity: .85; margin: 0 0 8px; }
.dw-scope .dw-tasks { list-style: none; margin: 0 0 10px; padding: 0; }
.dw-scope .dw-tasks li { display: flex; align-items: center; gap: 10px; padding: 6px 0; font: 600 13px var(--font-ui, 'Figtree', sans-serif); }
.dw-scope .dw-tasks li > i {
    flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .55);
    display: grid; place-items: center; font-style: normal; font-size: 10px;
}
.dw-scope .dw-tasks li > span { flex: 1; min-width: 0; }
.dw-scope .dw-tasks li b { display: block; font-weight: 700; }
.dw-scope .dw-tasks li em { display: block; font-style: normal; font-size: 11px; opacity: .72; margin-top: 1px; }
.dw-scope .dw-tasks li > small { flex: none; font: 600 10px var(--font-mono, 'JetBrains Mono', monospace); opacity: .75; }
.dw-scope .dw-tasks li.done { opacity: .7; }
.dw-scope .dw-tasks li.done > i { background: #fff; color: var(--c1); border-color: #fff; }
.dw-scope .dw-tasks li.find {
    cursor: pointer; margin: 0 -8px; padding: 8px; border-radius: 10px; background: rgba(255, 255, 255, .1);
}
.dw-scope .dw-tasks li.find + li { margin-top: 4px; }
.dw-scope .dw-tasks li.find > small { opacity: 1; font-weight: 800; color: var(--dw-amber); letter-spacing: .06em; }
.dw-scope .dw-tasks li.find > small.claim { background: var(--dw-amber); color: #1a1a1a; padding: 4px 8px; border-radius: 6px; }
.dw-scope .dw-tasks li.find:active { background: rgba(255, 255, 255, .2); }
.dw-scope .dw-tasks .dw-none { opacity: .7; font-weight: 500; }
.dw-scope .dw-bar { display: flex; gap: 2px; height: 30px; background: #fff; padding: 5px 8px; border-radius: 6px; }
.dw-scope .dw-bar i { flex: 1; background: #1a1a1a; opacity: .18; }
.dw-scope .dw-bar i.on { opacity: 1; }
.dw-scope .dw-claim {
    display: block; width: 100%; border: 0; border-radius: 12px; padding: 13px; cursor: pointer;
    background: var(--dw-amber); color: #1a1a1a; font: 800 14px var(--font-ui, 'Figtree', sans-serif);
}

/* commuter legs */
.dw-scope .dw-legs { display: flex; gap: 6px; margin-bottom: 10px; }
.dw-scope .dw-legs button {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px 7px; cursor: pointer;
    border-radius: 12px; background: rgba(255, 255, 255, .08); border: 1.5px solid transparent; color: #fff;
}
.dw-scope .dw-legs button.on { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .55); }
.dw-scope .dw-legs .dw-coin { width: 30px; height: 30px; }
.dw-scope .dw-legs b { font: 800 9px var(--font-mono, 'JetBrains Mono', monospace); letter-spacing: .12em; }
.dw-scope .dw-legs small { font: 600 10px var(--font-mono, 'JetBrains Mono', monospace); opacity: .7; }
.dw-scope .dw-legs button.clear small { color: #7ee2a2; opacity: 1; }

/* GLB token coins — baked filmstrips from js/dpad-coin-3d.js. The PNG fallback
   is a RULE, never inline (an inline background outranks the sprite swap). */
.dw-scope .dw-coin { display: block; background-repeat: no-repeat; background-position: center; background-size: contain; }
.dw-scope .dw-coin[data-tier="bronze"] { background-image: url(static/assets/d-pad-token-bronze.png); }
.dw-scope .dw-coin[data-tier="silver"] { background-image: url(static/assets/d-pad-token-silver.png); }
.dw-scope .dw-coin[data-tier="gold"]   { background-image: url(static/assets/d-pad-token-gold.png); }
body.coin3d .dw-scope .dw-coin { background-size: 2000% 100%; background-position-x: 0%; }
body.coin3d .dw-scope .dw-coin[data-tier="bronze"] { background-image: var(--coin-sprite-bronze); }
body.coin3d .dw-scope .dw-coin[data-tier="silver"] { background-image: var(--coin-sprite-silver); }
body.coin3d .dw-scope .dw-coin[data-tier="gold"]   { background-image: var(--coin-sprite-gold); }

/* "+ Add passes" — the door from the wallet to the board's Always boarding. */
.dw-scope .dw-more {
    display: block; width: 100%; margin-top: 14px; padding: 16px; text-align: left; cursor: pointer;
    border: 2px dashed rgba(26, 26, 26, .22); border-radius: 16px; background: transparent; color: #1a1a1a;
}
.dw-scope .dw-more b { display: block; font: 800 15px var(--font-ui, 'Figtree', sans-serif); }
.dw-scope .dw-more span { display: block; font-size: 12px; color: rgba(26, 26, 26, .6); margin-top: 3px; }
.dw-scope .dw-rm {
    display: block; width: 100%; margin-top: 10px; padding: 9px; border: 0; background: transparent; cursor: pointer;
    color: rgba(255, 255, 255, .75); font: 600 11.5px var(--font-ui, 'Figtree', sans-serif); text-decoration: underline;
}

/* PLAY tasks: the genre/theme pills under the task title (pill styles come from
   catalogue-overlay.css); the library they open must sit above the Home sheet. */
.dw-scope .dw-facets { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.dw-scope .dw-facets .game-meta-pill {
    font: 700 11px var(--font-ui, 'Figtree', sans-serif); background: rgba(255, 255, 255, .92) !important;
    color: #1a1a1a !important; border: 0; padding: 4px 9px; border-radius: 100px;
}
.dw-scope .dw-facets .game-meta-pill .game-meta-tap-caret { opacity: .5; margin-left: 3px; }
body.hb-sheet-open .genre-lib { z-index: 4200; }

/* PLAY tasks: the games that count, inline under the task (2026-10-10) */
.dw-scope .dw-tasks li.dw-games-li { display: block; padding: 0 0 6px; }
.dw-scope .dw-games { background: rgba(0, 0, 0, .18); border-radius: 12px; padding: 9px 0 10px; cursor: pointer; }
.dw-scope .dw-games-h { display: flex; flex-direction: column; gap: 1px; padding: 0 11px 7px; }
.dw-scope .dw-games-h span { font: 800 8.5px var(--font-mono, 'JetBrains Mono', monospace); letter-spacing: .14em; opacity: .7; }
.dw-scope .dw-games-h b { font: 700 12px var(--font-ui, 'Figtree', sans-serif); }
.dw-scope .dw-games-row {
    display: flex; gap: 8px; overflow-x: auto; padding: 0 11px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.dw-scope .dw-games-row::-webkit-scrollbar { display: none; }
.dw-scope .dw-game { flex: none; width: 64px; display: flex; flex-direction: column; gap: 3px; }
.dw-scope .dw-game img, .dw-scope .dw-game > i {
    width: 64px; height: 86px; object-fit: cover; border-radius: 7px; background: rgba(255, 255, 255, .15);
    display: grid; place-items: center; font-style: normal; font-weight: 800; box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}
.dw-scope .dw-game.yours img { outline: 2px solid #ffd93d; outline-offset: 1px; }
.dw-scope .dw-game b {
    font: 600 9.5px/1.2 var(--font-ui, 'Figtree', sans-serif); display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
}
.dw-scope .dw-game small { font: 700 8.5px var(--font-mono, 'JetBrains Mono', monospace); color: #ffd93d; }
.dw-scope .dw-games-wait { font-size: 11.5px; opacity: .7; padding: 4px 0; }
.dw-scope .dw-games-all {
    flex: none; align-self: flex-start; height: 86px; width: 64px; border: 1.5px dashed rgba(255, 255, 255, .45);
    background: transparent; color: inherit; border-radius: 7px; font: 700 11px var(--font-ui, 'Figtree', sans-serif); cursor: pointer;
}

/* Art tone: light art on a cream ground gets an ink disc */
.dw-scope .dw-stp.tone-light { background: #1a1a2e; border-radius: 50%; padding: 4px; box-sizing: border-box; }

/* Did you know? — a small ? on the card, the lore in a pop-up */
.dw-scope .dw-dyk {
    display: inline-grid; place-items: center; width: 20px; height: 20px; margin-left: 8px; vertical-align: middle;
    border-radius: 50%; border: 1.5px solid currentColor; background: transparent; color: inherit;
    font: 800 11px var(--font-ui, 'Figtree', sans-serif); letter-spacing: 0; padding: 0; cursor: pointer; opacity: 1;
}
/* Tap the stamp on an open pass → see it up close (#dw-zoom, dep-wallet.js). */
.dw-scope .dw-bp.open img.dw-stp { pointer-events: auto; cursor: zoom-in; }
#dw-zoom {
    position: fixed; inset: 0; z-index: 4260; background: rgba(10, 10, 20, .82);
    display: flex; align-items: center; justify-content: center; padding: 24px; cursor: zoom-out;
    animation: dwLoreIn .2s ease-out both;
}
#dw-zoom .dw-zoom-art {
    position: relative; width: min(86vw, 86vh, 520px); aspect-ratio: 1;
    animation: dwZoomIn .28s cubic-bezier(.2, 1.3, .4, 1) both;
}
#dw-zoom img, #dw-zoom video {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
    filter: drop-shadow(0 12px 30px rgba(0, 0, 0, .5));
}
#dw-zoom video { filter: none; }
#dw-zoom .dw-zoom-art.playing > img:first-child { visibility: hidden; }
#dw-zoom .dw-zoom-play {
    position: absolute; right: 4%; bottom: 4%; z-index: 1; width: 56px; height: 56px; border-radius: 50%;
    border: 0; background: #1a1a1a; color: #fff; font-size: 18px; cursor: pointer;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .4); display: grid; place-items: center;
}
@keyframes dwZoomIn { from { transform: scale(.4) rotate(7deg); opacity: 0; } }
#dw-lore {
    position: fixed; inset: 0; z-index: 4250; background: rgba(0, 0, 0, .45);
    display: flex; align-items: center; justify-content: center; padding: 16px;
    animation: dwLoreIn .2s ease-out both;
}
@keyframes dwLoreIn { from { opacity: 0; } }
#dw-lore .dw-lore-card {
    position: relative; width: 100%; max-width: 380px; max-height: 80vh; overflow-y: auto;
    background: #F4F1EA; color: #1a1a1a; border-radius: 18px; padding: 20px 20px 18px;
    border-left: 5px solid #FFD93D; font-family: var(--font-ui, 'Figtree', sans-serif);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .35);
}
#dw-lore img { display: block; width: 84px; height: 84px; object-fit: contain; margin: 0 auto 10px; }
#dw-lore small { display: block; font: 800 10px var(--font-mono, 'JetBrains Mono', monospace); letter-spacing: .16em; color: rgba(26, 26, 26, .55); }
#dw-lore b { display: block; font: 400 20px var(--font-display, 'Archivo Black', sans-serif); margin: 4px 0 8px; }
#dw-lore p { font-size: 14px; line-height: 1.55; margin: 0 0 10px; color: rgba(26, 26, 26, .78); }
#dw-lore p.dw-lore-dyk { font-size: 16px; color: #1a1a1a; }
#dw-lore a { font-size: 13px; font-weight: 700; color: #1a1a1a; }
#dw-lore .dw-lore-x {
    position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; border-radius: 50%; border: 0;
    background: rgba(0, 0, 0, .07); font-size: 20px; line-height: 1; cursor: pointer; color: #1a1a1a;
}

/* GO / MOVE / PLAY chip in a challenge pass's GATE field (2026-10-15).
   Colours from departures-tiles.css [data-bucket]. */
.dw-scope .dw-bk {
    display: inline-block; padding: 2px 7px 1px; border-radius: 100px;
    background: var(--dt-bucket-ink, #555); color: #fff;
    font: 800 9.5px var(--font-display, sans-serif); letter-spacing: .12em;
}

/* ── Pass skins (2026-10-17) ────────────────────────────────────────────
   Optional art behind the top of a pass (Flight Control → a stamp or a
   series → Decorate the pass). Washed in the pass colour from the left so
   the title and route always read; fades out before the stub. A closed
   pass shows the top strip of the art. Effects are gentle and switch off
   under reduce-motion. Preview of record: /static/pass-skins-preview.html */
/* The art fills the pass down to the perforation and no further, open or
   closed, so both show it at nearly the same wide shape (and one position
   from Flight Control suits both). A one-column grid lets it span exactly
   the header rows: top / route / fields (the fields row is empty when closed). */
.dw-scope .dw-bp.skinned { display: grid; grid-template-columns: minmax(0, 1fr); }
.dw-scope .dw-bp.skinned > .dw-top { grid-area: 1 / 1; }
.dw-scope .dw-bp.skinned > .dw-route { grid-area: 2 / 1; }
.dw-scope .dw-bp.skinned > .dw-flds { grid-area: 3 / 1; }
.dw-scope .dw-skin {
    grid-area: 1 / 1 / 4 / 2; position: relative; border-radius: 16px 16px 0 0;
    overflow: hidden; pointer-events: none; z-index: 0;
}
.dw-scope .dw-bp:not(.open) .dw-skin { border-radius: 16px; }
.dw-scope .dw-skin i { position: absolute; inset: 0 -3% 0 0; background-size: cover; opacity: .78;
    background-position: var(--sx, 70%) var(--sy, 40%); scale: var(--sz, 1); transform-origin: var(--sx, 70%) var(--sy, 40%); }
.dw-scope .dw-skin::before {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(90deg, color-mix(in oklab, var(--c1), transparent 8%) 0%,
        color-mix(in oklab, var(--c1), transparent 30%) 34%, color-mix(in oklab, var(--c1), transparent 85%) 72%,
        color-mix(in oklab, var(--c1), transparent 60%) 100%);
}
.dw-scope .dw-bp.skinned > .dw-top, .dw-scope .dw-bp.skinned > .dw-route, .dw-scope .dw-bp.skinned > .dw-flds,
.dw-scope .dw-bp.skinned > .dw-perf, .dw-scope .dw-bp.skinned > .dw-stub { position: relative; z-index: 1; }
/* above the rows (z 1) so the stamp stays tappable — tap to zoom */
.dw-scope .dw-bp.skinned > .dw-stp { z-index: 2; }
.dw-scope .dw-bp.skinned .dw-ttl, .dw-scope .dw-bp.skinned .dw-route > div { text-shadow: 0 1px 2px rgba(0, 0, 0, .45); }

.dw-scope .dw-skin i { animation: dwSkinDrift 30s ease-in-out infinite alternate; }
@keyframes dwSkinDrift { to { translate: -2% 0; } }
.dw-scope .dw-skin[data-fx]::after { content: ""; position: absolute; z-index: 1; pointer-events: none; }
.dw-scope .dw-skin[data-fx="fog"]::after {
    left: -50%; right: -50%; bottom: 10%; height: 45%;
    background: radial-gradient(60% 50% at 30% 60%, rgba(220, 205, 240, .22), transparent 70%),
                radial-gradient(50% 45% at 75% 50%, rgba(220, 205, 240, .18), transparent 70%);
    animation: dwSkinFog 18s ease-in-out infinite alternate;
}
@keyframes dwSkinFog { to { transform: translateX(14%); } }
.dw-scope .dw-skin[data-fx="flicker"]::after {
    inset: 0;
    background: radial-gradient(30% 40% at 66% 88%, rgba(255, 190, 90, .28), transparent 70%),
                radial-gradient(25% 35% at 84% 90%, rgba(255, 190, 90, .24), transparent 70%);
    animation: dwSkinFlicker 2.6s steps(6) infinite;
}
@keyframes dwSkinFlicker { 0%, 100% { opacity: .85; } 30% { opacity: 1; } 55% { opacity: .7; } 80% { opacity: .95; } }
/* embers: warm specks rising (bonfire night, Diwali) · snow: slow flakes (winter) */
.dw-scope .dw-skin[data-fx="embers"]::after, .dw-scope .dw-skin[data-fx="snow"]::after {
    inset: 0; background-size: 120px 120px;
    animation: dwSkinFall 9s linear infinite;
}
.dw-scope .dw-skin[data-fx="embers"]::after {
    background-image: radial-gradient(1.6px 1.6px at 20px 30px, rgba(255, 180, 80, .9), transparent),
        radial-gradient(1.2px 1.2px at 80px 70px, rgba(255, 140, 60, .8), transparent),
        radial-gradient(1.4px 1.4px at 50px 110px, rgba(255, 210, 120, .7), transparent);
    animation-name: dwSkinRise; animation-duration: 7s;
}
.dw-scope .dw-skin[data-fx="snow"]::after {
    background-image: radial-gradient(2px 2px at 20px 30px, rgba(255, 255, 255, .85), transparent),
        radial-gradient(1.5px 1.5px at 80px 70px, rgba(255, 255, 255, .7), transparent),
        radial-gradient(2.4px 2.4px at 50px 110px, rgba(255, 255, 255, .6), transparent);
}
@keyframes dwSkinFall { to { background-position: 10px 120px; } }
@keyframes dwSkinRise { to { background-position: -10px -120px; } }
@media (prefers-reduced-motion: reduce) {
    .dw-scope .dw-skin i, .dw-scope .dw-skin::after { animation: none !important; }
}

/* ── the open pass, Apple Wallet style (2026-10-29) — awPassHTML in
   js/dep-wallet.js; demo /static/pass-wallet-preview.html. One flat card in
   the pass's colour, the stamp at the top, the pass picture soft behind the
   top half, tasks inside, progress code in a white square. ?awpass=0 = off. */
.dw-scope .dw-bp.dw-aw { padding: 16px 18px 18px; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 28px rgba(0, 0, 0, .2); }
.dw-scope .dw-bp.dw-aw.skinned { display: block; }
.dw-scope .dw-bp.dw-aw > * { position: relative; z-index: 1; }
.dw-scope .dw-bp.dw-aw > .dw-skin { position: absolute; inset: 0 0 auto 0; height: 58%; border-radius: 0; opacity: .5; z-index: 0;
    -webkit-mask: linear-gradient(180deg, #000 40%, transparent); mask: linear-gradient(180deg, #000 40%, transparent); }
.dw-scope .dw-aw-hero { position: relative; display: flex; justify-content: center; margin: 0 0 14px; }
.dw-scope .dw-bp.dw-aw .dw-aw-hero .dw-stp { position: static; width: 150px; height: 150px; transform: none; object-fit: contain;
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .35)); pointer-events: auto; cursor: zoom-in; }
.dw-scope .dw-aw-play { position: absolute; left: 50%; bottom: 2px; transform: translateX(46px); width: 30px; height: 30px; border-radius: 50%;
    background: #1a1a1a; color: #fff; display: grid; place-items: center; font-size: 11px; pointer-events: none; box-shadow: 0 2px 6px rgba(0, 0, 0, .3); }
.dw-scope .dw-aw-hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.dw-scope .dw-aw-hd .dw-air { font-size: 11px; padding-top: 3px; display: flex; align-items: center; gap: 6px; }
.dw-scope .dw-aw-rw { text-align: right; }
.dw-scope .dw-aw-rw b { display: block; font: 700 17px/1.1 var(--font-ui, 'Figtree', sans-serif); }
.dw-scope .dw-aw-rw small { display: block; margin-top: 2px; font: 700 12px var(--font-ui, 'Figtree', sans-serif); color: #FFD93D; }
.dw-scope .dw-aw-flag { display: inline-block; margin-top: 8px; padding: 3px 8px; border-radius: 100px; background: rgba(255, 255, 255, .94); color: #1a1a1a;
    font: 800 9.5px var(--font-mono, 'JetBrains Mono', monospace); letter-spacing: .12em; }
.dw-scope .dw-aw-flag.red { background: #e74c3c; color: #fff; animation: dwBlink 1.2s steps(2) infinite; }
.dw-scope .dw-aw-flag.ok { background: #27ae60; color: #fff; }
.dw-scope .dw-aw-route { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; margin-top: 18px; }
.dw-scope .dw-aw-route b { display: block; font: 700 44px/1 var(--font-ui, 'Figtree', sans-serif); letter-spacing: -.01em; }
.dw-scope .dw-aw-route small { display: block; margin-top: 6px; font: 700 12.5px var(--font-ui, 'Figtree', sans-serif); opacity: .85; white-space: nowrap; }
.dw-scope .dw-aw-to { text-align: right; }
.dw-scope .dw-aw-plane { align-self: center; margin-bottom: 18px; padding: 0 6px; color: #FFD93D; font-size: 26px; line-height: 1; }
.dw-scope .dw-aw-name { position: relative; margin: 22px -18px 0; padding: 16px 18px 0; font: 700 15px/1.25 var(--font-ui, 'Figtree', sans-serif);
    text-transform: uppercase; letter-spacing: .02em; }
.dw-scope .dw-aw-name::before, .dw-scope .dw-aw-name::after { content: ""; position: absolute; top: -7px; width: 14px; height: 14px; border-radius: 50%;
    background: var(--dw-ground, #e9e3d6); }
.dw-scope .dw-aw-name::before { left: -7px; }
.dw-scope .dw-aw-name::after { right: -7px; }
.dw-scope .dw-aw-flds { display: flex; justify-content: space-between; gap: 10px; margin-top: 18px; }
.dw-scope .dw-aw-flds > div { min-width: 0; }
.dw-scope .dw-aw-flds > div:last-child { text-align: right; }
.dw-scope .dw-aw-flds small { display: block; font: 700 11.5px var(--font-ui, 'Figtree', sans-serif); color: #FFD93D; }
.dw-scope .dw-aw-flds span { display: block; margin-top: 3px; font: 700 17px/1.15 var(--font-ui, 'Figtree', sans-serif);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dw-scope .dw-aw-tasks { margin: 20px -18px 0; padding: 18px 18px 0; border-top: 2px dashed rgba(255, 255, 255, .35); }
.dw-scope .dw-aw-tasks .dw-tasks { margin: 0; }
.dw-scope .dw-aw-tasks .dw-tasks li { align-items: flex-start; gap: 12px; padding: 4px 0 12px; }
.dw-scope .dw-aw-tasks .dw-tasks li > i { width: 34px; height: 34px; border: 0; color: #fff; font: 8px var(--font-display-alt, 'Archivo Black', sans-serif);
    letter-spacing: .04em; background: #e74c3c; box-shadow: 0 0 0 2px rgba(255, 255, 255, .85); }
.dw-scope .dw-aw-tasks .dw-tasks li[data-lane="move"] > i { background: #2980b9; }
.dw-scope .dw-aw-tasks .dw-tasks li[data-lane="play"] > i { background: #8e44ad; }
.dw-scope .dw-aw-tasks .dw-tasks li.done > i { background: #27ae60; color: #fff; font-size: 15px; }
.dw-scope .dw-aw-tasks .dw-tasks li b { font-size: 16px; line-height: 1.25; }
.dw-scope .dw-aw-tasks .dw-tasks li em { font-size: 13.5px; margin-top: 3px; }
.dw-scope .dw-aw-tasks .dw-tasks li > small { padding-top: 7px; font-size: 12.5px; }
.dw-scope .dw-aw-tasks .dw-tasks li.find { margin: 0 -10px 6px; padding: 10px; }
.dw-scope .dw-aw-code { display: flex; justify-content: center; margin-top: 10px; }
.dw-scope .dw-aw-sq { width: 100%; padding: 14px 14px 10px; border-radius: 14px; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .18); }
.dw-scope .dw-aw-sq .dw-bar { height: 46px; padding: 0; gap: 3px; }
.dw-scope .dw-aw-sq .dw-bar i { border-radius: 2px; background: #e4dccb; opacity: 1; }
.dw-scope .dw-aw-sq .dw-bar i.on { background: #1a1a1a; }
.dw-scope .dw-aw-sq small { display: block; margin-top: 8px; text-align: center; color: #7a7466;
    font: 700 10px var(--font-mono, 'JetBrains Mono', monospace); letter-spacing: .12em; }
.dw-scope .dw-bp.dw-aw .dw-rm { margin-top: 12px; }
@media (max-width: 360px) {
    .dw-scope .dw-aw-route b { font-size: 36px; }
    .dw-scope .dw-aw-flds span { font-size: 15px; }
}
/* The Home sheet hides the corner stamp (it used to show the stamp above the
   pass instead); the Wallet-style pass's stamp is the one to keep. */
#hb-sheet .dw-bp.dw-aw .dw-aw-hero .dw-stp { display: block; }

/* ── favourites (2026-10-29): the hold bar at the foot of an open pass and
   the fill any [data-fav] element shows while held (js/dep-wallet.js). ── */
[data-fav] { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
[data-fav] img { -webkit-user-drag: none; }
.dw-scope .dw-favbar { position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 14px;
    padding: 13px 14px; border: 0; border-radius: 14px; background: rgba(0, 0, 0, .22); color: #fff; text-align: left; cursor: pointer; }
.dw-scope .dw-favbar::before { content: ""; position: absolute; inset: 0; width: var(--hp, 0%); background: rgba(255, 217, 61, .55); }
.dw-scope .dw-favbar.dw-unfav::before { background: rgba(255, 255, 255, .25); }
.dw-scope .dw-favbar > * { position: relative; pointer-events: none; }
.dw-scope .dw-favbar-ic { font-size: 22px; line-height: 1; color: #FFD93D; }
.dw-scope .dw-favbar b { display: block; font: 700 14.5px var(--font-ui, 'Figtree', sans-serif); }
.dw-scope .dw-favbar small { display: block; margin-top: 2px; font: 500 12px var(--font-ui, 'Figtree', sans-serif); opacity: .8; }
.dw-scope .dw-favbar.dw-held { animation: dwFavPop .5s cubic-bezier(.2, 1.6, .4, 1); }
.dw-scope .dw-aw-star { color: #FFD93D; font-size: 12px; letter-spacing: 0; }
@keyframes dwFavPop { 40% { transform: scale(1.03); } }
/* The wallet button retires (2026-10-29): Your passes on the D-PAD tab holds
   favourites, passes under way and ones leaving soon. The wallet sheet still
   opens if code asks for it (dpadWallet.open / openPass). */
body.dep-wallet #dep-hud-btn { display: none !important; }

/* ── the favourite star (2026-10-30), top-right of every pass and card ── */
.dw-star { cursor: pointer; display: grid; place-items: center; border: 0; padding: 0; line-height: 1;
    font: 400 20px/1 var(--font-ui, 'Figtree', sans-serif); -webkit-tap-highlight-color: transparent; transition: transform .15s; }
.dw-star:active { transform: scale(.85); }
.dw-star.on { color: #FFD93D; }
.dw-scope .dw-star-pass { position: absolute; z-index: 3; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 50%;
    background: rgba(0, 0, 0, .28); color: #fff; font-size: 22px; }
.dw-scope .dw-star-pass.on { background: rgba(0, 0, 0, .35); }
/* the pass's children are all position:relative (dw-aw); the star is the exception */
.dw-scope .dw-bp.dw-aw > .dw-star-pass { position: absolute; z-index: 3; top: 12px; right: 12px; left: auto; }
.dw-scope .dw-star-pass.on { color: #FFD93D; }

/* Either/or steps (2026-11-01): each choice on its own line with a small
   "— or —" rule between them, instead of one run-on "A or B or C" line. */
.dw-scope .dw-tasks li b.dw-either > span { display: block; }
.dw-scope .dw-tasks li b.dw-either > .dw-or {
    display: flex; align-items: center; gap: 8px; margin: 5px 0;
    font: 800 9.5px var(--font-mono, 'JetBrains Mono', monospace); letter-spacing: .16em;
    text-transform: uppercase; opacity: .7;
}
.dw-scope .dw-tasks li b.dw-either > .dw-or::before,
.dw-scope .dw-tasks li b.dw-either > .dw-or::after {
    content: ""; flex: 1; height: 1px; background: currentColor; opacity: .45;
}
.dw-scope .dw-tasks li b.dw-either > .dw-or::before { flex: 0 0 14px; }
/* No stamp art yet (e.g. a new stamp in Flight Control's wizard): the ☆ sits
   where the art would be, so move the reward clear of it. */
.dw-scope .dw-bp.dw-aw.noart .dw-aw-rw { padding-right: 46px; flex: none; }
.dw-scope .dw-bp.dw-aw.noart .dw-aw-rw b { white-space: nowrap; }

/* ── Finish-within time limit (2026-11-02, timeLimitHTML in js/dep-wallet.js) ── */
.dw-tl { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 12px; padding: 9px 11px;
  border-radius: 12px; background: rgba(0, 0, 0, .18); font: 500 13px/1.4 var(--font-ui, Figtree, sans-serif); color: #fff; }
.dw-tl span { flex: 1; }
.dw-tl b { font-weight: 800; color: #FFD93D; }
.dw-tl.late { background: rgba(192, 57, 43, .85); }
.dw-tl.late b { color: #fff; }
/* the classic (cream) open pass */
.dw-bp:not(.dw-aw) .dw-tl { background: rgba(26, 26, 26, .06); color: #1a1a1a; }
.dw-bp:not(.dw-aw) .dw-tl b { color: #1a1a1a; }

/* ── Reward symbols (2026-11-02, rewardHTML in js/dep-wallet.js) ──────────
   stamp teardrop (map-pins glyph) · spinning token coin (baked filmstrip) ·
   +150 and the D-PAD mark, the Miles currency sign. Global, not scoped: the
   home lane cards live outside .dw-scope. */
.rw-row { display: inline-flex; align-items: center; gap: .4em; vertical-align: middle; line-height: 1; }
.rw-pin { width: 1.2em; height: 1.5em; flex: none; overflow: visible; }
.rw-pin-bg { fill: var(--rw-pin, var(--hc, #b8892a)); }
.rw-pin-g { stroke: var(--rw-glyph, #fff); }
.rw-row .rw-coin.dw-coin { display: inline-block; flex: none; width: 1.55em; height: 1.55em;
  background-repeat: no-repeat; background-position: center; background-size: contain; }
.rw-row .rw-coin[data-tier="bronze"] { background-image: url(static/assets/d-pad-token-bronze.png); }
.rw-row .rw-coin[data-tier="silver"] { background-image: url(static/assets/d-pad-token-silver.png); }
.rw-row .rw-coin[data-tier="gold"]   { background-image: url(static/assets/d-pad-token-gold.png); }
body.coin3d .rw-row .rw-coin.dw-coin { background-size: 2000% 100%; background-position-x: 0%; animation: rwCoin 2.6s steps(20) infinite; }
body.coin3d .rw-row .rw-coin[data-tier="bronze"] { background-image: var(--coin-sprite-bronze); }
body.coin3d .rw-row .rw-coin[data-tier="silver"] { background-image: var(--coin-sprite-silver); }
body.coin3d .rw-row .rw-coin[data-tier="gold"]   { background-image: var(--coin-sprite-gold); }
@keyframes rwCoin { from { background-position-x: 0%; } to { background-position-x: 105.2632%; } }
@media (prefers-reduced-motion: reduce) { body.coin3d .rw-row .rw-coin.dw-coin { animation: none; } }
.rw-mi { display: inline-flex; align-items: center; gap: .15em; font-weight: 800; white-space: nowrap; }
.rw-dpad { display: inline-block; flex: none; width: 1.2em; height: 1.2em; fill: currentColor; color: inherit; }
/* on the open pass (its own colour behind): a white pin, glyph in the pass colour */
.dw-scope .dw-aw-rw .rw-row { --rw-pin: #fff; --rw-glyph: var(--c1); font: 800 19px var(--font-ui, 'Figtree', sans-serif); color: #FFD93D; }
.dw-scope .dw-reward .rw-row { --rw-pin: #fff; --rw-glyph: var(--c1, #1a1a1a); background: rgba(255, 255, 255, .16); padding: 5px 10px; border-radius: 100px; font: 800 13px var(--font-ui, 'Figtree', sans-serif); }
.dw-scope .dw-reward .rw-row span { background: none; padding: 0; border-radius: 0; font: inherit; }
/* lane cards */
#home-board .hbs-pr .rw-row { font-size: 16px; }

/* A daily/weekly/monthly challenge that pays Miles only (2026-11-03): the
   D-PAD mark on a cream disc where the bronze/silver/gold coin used to sit,
   so the card never suggests a boost token was won. Sized by whatever box the
   coin had (dw-stp, hb-th, pr-coin, us-coin…). Global, like .rw-row. */
.dw-coin.dw-mibadge { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  border-radius: 50%; background: #F4F1EA !important; background-image: none !important; color: #1a1a1a;
  border: 2px solid rgba(26,26,26,.85); box-shadow: 0 2px 6px rgba(0,0,0,.18); animation: none !important; }
.dw-coin.dw-mibadge .rw-dpad { width: 58%; height: 58%; }