/* ===================================================================
   D-PAD tour — the animated "how to use the app" walkthrough
   (js/dpad-tour.js). Sister of the intro film (dpad-intro.css): same
   chrome, but every scene happens on a drawn phone, with a finger
   tapping through the real screens.
   Preview of record: /static/how-to-use-dpad-preview.html.
   Everything is scoped under #dpad-tour; the stage is drawn at 360×640
   and scaled to fit the screen.
   =================================================================== */

#dpad-tour {
    --dt-paper: #F4F1EA; --dt-ink: #1a1a1a; --dt-gold: #FFD93D; --dt-navy: #14183a; --dt-mute: #7a7466;
    --dt-go: #e74c3c; --dt-move: #2980b9; --dt-play: #8e44ad; --dt-green: #27ae60;
    position: fixed; inset: 0; z-index: 20001;
    background: var(--dt-paper);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: max(16px, env(safe-area-inset-top)) 12px max(16px, env(safe-area-inset-bottom));
    font-family: var(--font-ui, Figtree, system-ui, sans-serif); color: var(--dt-ink);
    -webkit-tap-highlight-color: transparent;
}
#dpad-tour * { box-sizing: border-box; margin: 0; padding: 0; }
#dpad-tour .tr-frame { position: relative; flex: none; }
#dpad-tour .tr-stage { width: 360px; height: 640px; position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; background: var(--dt-paper); }
#dpad-tour .mono { font-family: 'JetBrains Mono', monospace; font-weight: 700; }
#dpad-tour .disp { font-family: var(--font-display, 'Archivo Black'), sans-serif; font-weight: 400; }

/* the kicker over the phone + the caption under it */
#dpad-tour .tr-kick { position: absolute; left: 0; right: 0; top: 16px; text-align: center; font: 700 11px 'JetBrains Mono', monospace; letter-spacing: .22em; color: var(--dt-mute); }
#dpad-tour .tr-cap { position: absolute; left: 22px; right: 22px; top: 538px; text-align: center; opacity: 0; }
#dpad-tour .tr-cap b { display: block; font: 21px/1.12 var(--font-display, 'Archivo Black'), sans-serif; letter-spacing: -.01em; }
#dpad-tour .tr-cap small { display: block; margin-top: 6px; font-size: 14px; line-height: 1.35; color: var(--dt-mute); }
#dpad-tour .tr-cap small em { font-style: normal; font-weight: 800; color: var(--dt-ink); }

/* title + end cards (full stage, no phone) */
#dpad-tour .tr-card { position: absolute; inset: 0; background: var(--dt-paper); opacity: 0; visibility: hidden; z-index: 5; }
#dpad-tour .tr-card img { position: absolute; left: 50%; width: 120px; height: 120px; margin-left: -60px; top: 170px; }
#dpad-tour .tr-card h2 { position: absolute; left: 20px; right: 20px; top: 318px; text-align: center; font: 38px/1.02 var(--font-display, 'Archivo Black'), sans-serif; letter-spacing: -.02em; }
#dpad-tour .tr-card p { position: absolute; left: 30px; right: 30px; top: 420px; text-align: center; font-size: 17px; line-height: 1.35; color: var(--dt-mute); }
#dpad-tour .tr-card p em { font-style: normal; font-weight: 800; color: var(--dt-ink); }

/* ── the phone ─────────────────────────────────────────────────────── */
#dpad-tour .tr-phone { position: absolute; left: 50px; top: 42px; width: 260px; height: 482px; border-radius: 34px; background: #111; padding: 7px; box-shadow: 0 18px 40px rgba(0,0,0,.22); opacity: 0; }
#dpad-tour .tr-scr { position: relative; width: 246px; height: 468px; border-radius: 27px; overflow: hidden; background: var(--dt-paper); }

/* header: avatar · miles chip · boost · help */
#dpad-tour .tr-hdr { position: absolute; left: 0; right: 0; top: 0; height: 46px; padding: 14px 12px 0; display: flex; align-items: center; gap: 7px; background: var(--dt-paper); z-index: 3; }
#dpad-tour .tr-ava { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, #2980b9, #8e44ad); flex: none; }
#dpad-tour .tr-miles { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px; border-radius: 100px; background: #efe6c5; border: 1.5px solid #e2d29a; font: 13px var(--font-display, 'Archivo Black'), sans-serif; color: #a9811b; }
#dpad-tour .tr-miles i { font-style: normal; font: 700 7px 'JetBrains Mono', monospace; letter-spacing: .12em; color: #b8a067; }
#dpad-tour .tr-sp { flex: 1; }
#dpad-tour .tr-bolt { display: inline-flex; align-items: center; gap: 2px; height: 24px; padding: 0 8px; border-radius: 100px; background: var(--dt-ink); color: var(--dt-gold); font: 800 11px var(--font-ui, Figtree, sans-serif); }
#dpad-tour .tr-help { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid #cfc6b2; display: grid; place-items: center; font: 800 11px var(--font-ui, sans-serif); color: var(--dt-mute); }

/* boost strip — hangs under the header once a boost is running */
#dpad-tour .tr-flight { position: absolute; left: 0; right: 0; top: 46px; height: 30px; background: var(--dt-navy); color: #fff; z-index: 3; display: flex; align-items: center; gap: 6px; padding: 0 10px; font: 700 7.5px 'JetBrains Mono', monospace; letter-spacing: .12em; opacity: 0; }
#dpad-tour .tr-flight .tr-trk { position: relative; flex: 1; height: 2px; background: repeating-linear-gradient(90deg, #4a5196 0 4px, transparent 4px 8px); }
#dpad-tour .tr-flight .tr-pl { position: absolute; left: 0; top: -8px; font-size: 12px; color: var(--dt-gold); }
#dpad-tour .tr-flight b { color: var(--dt-gold); font-size: 8.5px; }

/* tab bar */
#dpad-tour .tr-tabs { position: absolute; left: 0; right: 0; bottom: 0; height: 54px; padding-bottom: 8px; background: #fffdf7; border-top: 1px solid #e4dccb; display: flex; z-index: 3; }
#dpad-tour .tr-tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font: 700 8px var(--font-ui, sans-serif); color: #9a927f; position: relative; }
#dpad-tour .tr-tab svg, #dpad-tour .tr-tab img { width: 17px; height: 17px; }
#dpad-tour .tr-tab img { filter: grayscale(1) brightness(.75); }
#dpad-tour .tr-tab.on { color: var(--dt-ink); }
#dpad-tour .tr-tab.on img { filter: none; }
#dpad-tour .tr-tab.on::before { content: ""; position: absolute; top: 0; left: 22%; right: 22%; height: 3px; border-radius: 0 0 3px 3px; background: var(--dt-ink); }
#dpad-tour .tr-tip { position: absolute; bottom: 64px; left: 50%; width: 132px; margin-left: -66px; padding: 7px 8px; border-radius: 10px; background: var(--dt-ink); color: #fff; text-align: center; font: 600 10px/1.25 var(--font-ui, sans-serif); opacity: 0; z-index: 4; }
#dpad-tour .tr-tip b { display: block; font: 11px var(--font-display, 'Archivo Black'), sans-serif; color: var(--dt-gold); margin-bottom: 1px; }
#dpad-tour .tr-tip::after { content: ""; position: absolute; left: var(--ax, 50%); bottom: -5px; margin-left: -5px; border: 5px solid transparent; border-bottom: 0; border-top-color: var(--dt-ink); }

/* views — one at a time between header and tab bar */
#dpad-tour .tr-view { position: absolute; left: 0; right: 0; top: 46px; bottom: 54px; overflow: hidden; opacity: 0; visibility: hidden; }

/* Home: the split-flap board */
#dpad-tour .tr-home { background: #1b1d33; padding: 8px 8px 0; color: #fff; }
#dpad-tour .tr-bh { display: flex; justify-content: space-between; padding: 8px 4px 5px; font: 700 7.5px 'JetBrains Mono', monospace; letter-spacing: .16em; color: var(--dt-gold); }
#dpad-tour .tr-bh span:last-child { color: #8d93c8; }
#dpad-tour .tr-row { position: relative; display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 8px; margin-bottom: 3px; border-radius: 6px; background: #262947; font: 700 9.5px 'JetBrains Mono', monospace; letter-spacing: .04em; }
#dpad-tour .tr-row img { width: 24px; height: 24px; border-radius: 50%; background: #fff; flex: none; }
#dpad-tour .tr-row .tr-t { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#dpad-tour .tr-row .tr-r { color: var(--dt-gold); font-size: 8px; }
#dpad-tour .tr-row[data-b] { box-shadow: inset 3px 0 0 var(--hue); }
#dpad-tour .tr-bk { display: inline-block; padding: 2px 5px 1px; border-radius: 100px; background: var(--hue); color: #fff; font: 7px var(--font-display, 'Archivo Black'), sans-serif; letter-spacing: .1em; flex: none; }
#dpad-tour [data-b="go"] { --hue: var(--dt-go); }
#dpad-tour [data-b="move"] { --hue: var(--dt-move); }
#dpad-tour [data-b="play"] { --hue: var(--dt-play); }
#dpad-tour .tr-legend { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; flex-direction: column; gap: 4px; }
#dpad-tour .tr-legend div { display: flex; align-items: center; gap: 7px; padding: 6px 8px; border-radius: 8px; background: #fffdf7; color: var(--dt-ink); font: 600 10px var(--font-ui, sans-serif); opacity: 0; }

/* the boarding pass sheet */
#dpad-tour .tr-sheet { position: absolute; left: 0; right: 0; bottom: 0; height: 330px; border-radius: 20px 20px 0 0; background: #fffdf7; color: var(--dt-ink); box-shadow: 0 -10px 30px rgba(0,0,0,.3); overflow: hidden; z-index: 2; }
#dpad-tour .tr-sheet .tr-top { background: var(--dt-navy); color: #fff; padding: 10px 14px; display: flex; justify-content: space-between; font: 700 8px 'JetBrains Mono', monospace; letter-spacing: .16em; }
#dpad-tour .tr-sheet .tr-top span:last-child { color: var(--dt-gold); }
#dpad-tour .tr-sheet h4 { font: 19px/1.05 var(--font-display, 'Archivo Black'), sans-serif; padding: 12px 14px 2px; width: 150px; }
#dpad-tour .tr-sheet .tr-sub { font-size: 10px; color: var(--dt-mute); padding: 0 14px; }
#dpad-tour .tr-sheet .tr-art { position: absolute; right: 10px; top: 36px; width: 82px; height: 82px; }
#dpad-tour .tr-gate { margin: 26px 14px 0; font: 700 7.5px 'JetBrains Mono', monospace; letter-spacing: .16em; color: var(--dt-mute); }
#dpad-tour .tr-taskrow { position: relative; display: flex; align-items: center; gap: 8px; margin: 6px 14px 0; padding: 10px; border-radius: 10px; border: 1.5px solid #e4dccb; font: 700 12px var(--font-ui, sans-serif); }
#dpad-tour .tr-taskrow .tr-n { margin-left: auto; font: 700 9px 'JetBrains Mono', monospace; color: var(--dt-mute); }
#dpad-tour .tr-find { display: block; margin: 8px 14px 0; padding: 9px; border-radius: 10px; background: var(--dt-go); color: #fff; text-align: center; font: 12px var(--font-display, 'Archivo Black'), sans-serif; letter-spacing: .08em; }
#dpad-tour .tr-pbar { height: 6px; margin: 14px 14px 0; border-radius: 4px; background: #ece5d4; overflow: hidden; }
#dpad-tour .tr-pbar u { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ffb11f, var(--dt-gold)); }
#dpad-tour .tr-punch { position: absolute; left: 50%; top: 150px; margin-left: -70px; width: 140px; padding: 6px 0; text-align: center; border: 3px solid var(--dt-green); color: var(--dt-green); border-radius: 8px; font: 16px var(--font-display, 'Archivo Black'), sans-serif; letter-spacing: .08em; transform: rotate(-10deg); opacity: 0; background: rgba(255,253,247,.85); }

/* Departures: the map */
#dpad-tour .tr-map { background: #e8e2d2; }
#dpad-tour .tr-map svg.tr-streets { position: absolute; inset: 0; width: 100%; height: 100%; }
#dpad-tour .tr-pin { position: absolute; width: 22px; height: 29px; margin: -29px 0 0 -11px; }
#dpad-tour .tr-me { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--dt-move); border: 3px solid #fff; box-shadow: 0 0 0 6px rgba(41,128,185,.22); }
#dpad-tour .tr-list { position: absolute; left: 8px; right: 8px; bottom: 8px; border-radius: 12px; background: #fffdf7; box-shadow: 0 6px 18px rgba(0,0,0,.18); padding: 8px 10px; }
#dpad-tour .tr-list .tr-lh { font: 700 7.5px 'JetBrains Mono', monospace; letter-spacing: .16em; color: var(--dt-mute); margin-bottom: 4px; }
#dpad-tour .tr-list div.tr-li { display: flex; justify-content: space-between; padding: 4px 0; border-top: 1px dashed #e4dccb; font: 700 11px var(--font-ui, sans-serif); }
#dpad-tour .tr-list div.tr-li span { font: 700 9px 'JetBrains Mono', monospace; color: var(--dt-go); }
#dpad-tour .tr-unlock { position: absolute; left: 0; right: 0; bottom: 0; height: 190px; border-radius: 20px 20px 0 0; background: var(--dt-navy); color: #fff; text-align: center; z-index: 2; }
#dpad-tour .tr-unlock .tr-uk { padding-top: 14px; font: 700 8px 'JetBrains Mono', monospace; letter-spacing: .2em; color: var(--dt-gold); }
#dpad-tour .tr-unlock h5 { font: 16px var(--font-display, 'Archivo Black'), sans-serif; margin-top: 4px; }
#dpad-tour .tr-unlock svg { display: block; width: 84px; height: 84px; margin: 10px auto 0; }
#dpad-tour .tr-unlock .tr-ok { position: absolute; left: 0; right: 0; top: 92px; font: 26px var(--font-display, 'Archivo Black'), sans-serif; color: var(--dt-green); opacity: 0; }
#dpad-tour .tr-unlock .tr-uf { margin-top: 6px; font: 700 8px 'JetBrains Mono', monospace; letter-spacing: .14em; color: #aab0d6; }

/* reward moment: stamp + token over a scrim */
#dpad-tour .tr-scrim { position: absolute; inset: 0; background: rgba(13,16,48,.82); z-index: 4; opacity: 0; visibility: hidden; }
#dpad-tour .tr-bigstamp { position: absolute; left: 38px; top: 70px; width: 170px; height: 170px; opacity: 0; }
#dpad-tour .tr-coin { position: absolute; left: 88px; top: 262px; width: 70px; height: 70px; opacity: 0; }
#dpad-tour .tr-coin img, #dpad-tour .tr-bigstamp img { width: 100%; height: 100%; }
#dpad-tour .tr-toklbl { position: absolute; left: 0; right: 0; top: 342px; text-align: center; font: 700 8.5px 'JetBrains Mono', monospace; letter-spacing: .16em; color: var(--dt-gold); opacity: 0; }

/* boost picker */
#dpad-tour .tr-picker { position: absolute; inset: 0; background: rgba(13,16,48,.9); z-index: 4; opacity: 0; visibility: hidden; color: #fff; text-align: center; }
#dpad-tour .tr-picker .tr-ph { margin-top: 92px; font: 700 8px 'JetBrains Mono', monospace; letter-spacing: .2em; color: #aab0d6; }
#dpad-tour .tr-picker .tr-hold { position: relative; width: 130px; height: 130px; margin: 18px auto 0; }
#dpad-tour .tr-picker .tr-hold img { position: absolute; left: 25px; top: 25px; width: 80px; height: 80px; }
#dpad-tour .tr-picker .tr-hold svg { position: absolute; inset: 0; transform: rotate(-90deg); }
#dpad-tour .tr-picker .tr-pt { margin-top: 12px; font: 15px var(--font-display, 'Archivo Black'), sans-serif; }
#dpad-tour .tr-picker .tr-pd { margin-top: 4px; font-size: 10.5px; color: #aab0d6; }
#dpad-tour .tr-cleared { position: absolute; left: 0; right: 0; top: 300px; font: 22px/1.05 var(--font-display, 'Archivo Black'), sans-serif; color: var(--dt-gold); opacity: 0; }

/* Passport: the stamp page */
#dpad-tour .tr-pass { background: #fbf8f0; background-image: repeating-linear-gradient(0deg, transparent 0 23px, #efe7d6 23px 24px); }
#dpad-tour .tr-pass .tr-pgh { padding: 12px 14px 0; font: 700 7.5px 'JetBrains Mono', monospace; letter-spacing: .18em; color: var(--dt-mute); }
#dpad-tour .tr-pass .tr-cnt { padding: 2px 14px 0; font: 15px var(--font-display, 'Archivo Black'), sans-serif; }
#dpad-tour .tr-pass img { position: absolute; width: 104px; height: 104px; }

/* Duty Free: gift cards */
#dpad-tour .tr-shop { padding: 12px 12px 0; }
#dpad-tour .tr-shop .tr-pgh { font: 700 7.5px 'JetBrains Mono', monospace; letter-spacing: .18em; color: var(--dt-mute); margin-bottom: 8px; }
#dpad-tour .tr-gc { position: relative; height: 84px; border-radius: 12px; color: #fff; padding: 10px 12px; margin-bottom: 8px; }
#dpad-tour .tr-gc small { font: 700 7px 'JetBrains Mono', monospace; letter-spacing: .18em; opacity: .85; }
#dpad-tour .tr-gc b { display: block; margin-top: 4px; font: 15px/1.05 var(--font-display, 'Archivo Black'), sans-serif; }
#dpad-tour .tr-gc span { position: absolute; right: 12px; bottom: 9px; font: 700 9px 'JetBrains Mono', monospace; letter-spacing: .06em; padding: 3px 7px; border-radius: 100px; background: rgba(0,0,0,.25); }
#dpad-tour .tr-gc em { position: absolute; right: 12px; top: 8px; font: 20px var(--font-display, 'Archivo Black'), sans-serif; font-style: normal; }
#dpad-tour .tr-redeem { position: absolute; left: 12px; right: 12px; bottom: 12px; padding: 9px; border-radius: 10px; background: var(--dt-green); color: #fff; text-align: center; font: 700 8.5px 'JetBrains Mono', monospace; letter-spacing: .14em; opacity: 0; }

/* the finger */
#dpad-tour .tr-finger { position: absolute; left: 0; top: 0; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: rgba(26,26,26,.28); border: 3px solid rgba(255,255,255,.95); box-shadow: 0 4px 12px rgba(0,0,0,.25); z-index: 6; opacity: 0; pointer-events: none; }
#dpad-tour .tr-ripple { position: absolute; left: 0; top: 0; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 2px solid var(--dt-gold); z-index: 6; opacity: 0; pointer-events: none; }

/* chrome: skip, progress, the button out (same as the intro film) */
#dpad-tour .tr-skip { position: absolute; top: max(14px, env(safe-area-inset-top)); right: 14px; z-index: 7; min-height: 40px; padding: 0 16px; border: 0; border-radius: 100px; background: rgba(26,26,26,.08); color: var(--dt-ink); font: 700 13px var(--font-ui, Figtree, sans-serif); cursor: pointer; }
#dpad-tour .tr-prog { position: absolute; left: 16px; right: 16px; top: max(8px, calc(env(safe-area-inset-top) - 6px)); height: 3px; border-radius: 2px; background: rgba(26,26,26,.1); overflow: hidden; z-index: 7; }
#dpad-tour .tr-prog u { display: block; height: 100%; width: 0; background: #a9811b; }
#dpad-tour .tr-out { position: absolute; left: 22px; right: 22px; bottom: max(22px, env(safe-area-inset-bottom)); z-index: 7; display: flex; flex-direction: column; gap: 4px; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .4s, transform .4s, visibility .4s; }
#dpad-tour .tr-out.on { opacity: 1; visibility: visible; transform: none; }
#dpad-tour .tr-go { width: 100%; padding: 15px; border: 0; border-radius: 14px; background: var(--dt-ink); color: var(--dt-paper); font: 700 14.5px var(--font-ui, Figtree, sans-serif); cursor: pointer; }
#dpad-tour .tr-again { width: 100%; padding: 11px; border: 0; background: transparent; color: rgba(26,26,26,.55); font: 600 13px var(--font-ui, Figtree, sans-serif); cursor: pointer; }