/* Snail Trip · lock-in journey (20/10/2026). Token lấy từ gommie.page, không chế màu mới. */
:root{
  --sky:#dae8df; --paper:#f5f1e7; --ink:#343b36; --coral:#d5564b; --teal:#00838a;
  --muted:#65756b; --line:#343b3622; --line2:#343b3640;
  --serif:'Iowan Old Style','Palatino Linotype',Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --spring:cubic-bezier(.2,1.25,.35,1); --out:cubic-bezier(.16,1,.3,1);
  --lift:0 0 0 1px var(--line),0 22px 50px -22px #343b3680,0 3px 10px -4px #343b3626;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--sky);color:var(--ink);font-family:var(--sans);overflow:hidden;-webkit-font-smoothing:antialiased;overscroll-behavior:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
button:focus-visible,a:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
img{display:block}

/* icon = SF Symbol thật xuất PNG, dùng làm mask để tô theo màu chữ */
.ic{display:inline-block;flex:none;background:currentColor;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.i-lock{--m:url(assets/icons/lock.png);width:15px;height:18px}
.i-lock-open{--m:url(assets/icons/lock-open.png);width:20px;height:18px}
.i-chev-l{--m:url(assets/icons/chevron-left.png);width:11px;height:15px}
.i-chev-r{--m:url(assets/icons/chevron-right.png);width:11px;height:15px}
.i-ext{--m:url(assets/icons/extension.png);width:19px;height:15px}
.i-check{--m:url(assets/icons/check.png);width:11px;height:10px}
.i-play{--m:url(assets/icons/play.png);width:12px;height:13px}
.i-arrow{--m:url(assets/icons/arrow-right.png);width:14px;height:11px}
.i-x{--m:url(assets/icons/xmark.png);width:10px;height:10px}

/* ---------- sân khấu bản đồ ---------- */
#map{position:fixed;inset:0;width:100%;height:100%;touch-action:none}
.veil{position:fixed;left:0;right:0;top:0;height:500px;pointer-events:none;
  background:linear-gradient(var(--sky) 0,var(--sky) 66%,#dae8df00 100%);transition:opacity .7s var(--out)}
body:not([data-step=home]) .veil{opacity:0}
#stage{position:fixed;inset:0;pointer-events:none}

.brand{position:fixed;left:40px;top:28px;display:flex;align-items:center;gap:9px;z-index:30;transition:opacity .3s}
.brand img:first-child{width:26px}.brand img:last-child{width:72px}

/* ---------- hero ---------- */
.hero{position:fixed;left:0;right:0;top:82px;text-align:center;z-index:20;transition:opacity .5s var(--out),transform .7s var(--out)}
.hero h1{font:400 82px/.98 var(--serif);letter-spacing:-.055em;margin:0}
.hero h1 em{display:block;color:var(--coral)}
.hero .sub{font-size:19px;line-height:1.45;margin:22px 0 26px;color:#343b36d9}
.tally{margin:16px 0 0;font-size:13px;color:var(--muted);min-height:1em}
body:not([data-step=home]) .hero{opacity:0;transform:translateY(-40px);pointer-events:none}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 27px;border-radius:40px;background:var(--ink);color:var(--paper);font-size:15px;line-height:1;border:1px solid var(--ink);transition:transform .25s var(--spring),box-shadow .25s}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 22px -10px #343b36aa}
.btn:active{transform:translateY(1px) scale(.98)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line2)}
.btn.ghost:hover{box-shadow:none;background:#343b360a}
.btn.wide{width:100%;padding:17px 22px;font-size:16px}

/* ---------- ghim địa điểm ---------- */
.pin{position:absolute;left:0;top:0;will-change:transform;pointer-events:none;transition:opacity .4s}
.pin .in{position:absolute;left:0;top:0;transform:translate(-50%,calc(-100% - 12px))}
.pin .tag{display:flex;align-items:baseline;gap:0;white-space:nowrap;padding:6px 10px;border-radius:8px;background:var(--paper);box-shadow:0 0 0 1px var(--line),0 6px 14px -8px #343b3666;
  font-size:12.5px;line-height:1;transform-origin:50% 100%;transition:background .25s,color .25s,transform .35s var(--spring),opacity .25s}
.pin .tag b{font-weight:600;font-variant-numeric:tabular-nums}
.pin .tag b:before{content:'';display:inline-block;width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.45;margin:0 6px 3px 7px;vertical-align:middle}
.pin .dot{position:absolute;left:50%;bottom:-12px;width:9px;height:9px;margin:0 0 -4.5px -4.5px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 2px var(--paper)}
.pin.ping .tag{animation:ping .6s var(--spring)}
@keyframes ping{40%{transform:translateY(-6px) scale(1.14)}}
.pin.left .in{transform:translate(calc(-100% - 14px),-50%)}
.pin.right .in{transform:translate(14px,-50%)}
.pin.left .dot{left:calc(100% + 14px);bottom:50%}
.pin.right .dot{left:-14px;bottom:50%}
.pin .in{transition:transform .35s var(--out)}
.pin.home .in{transform:translate(-50%,14px)}
.pin.home .tag{background:transparent;box-shadow:none;font-weight:600;padding:0}
.pin.home .dot{display:none}
.pin.pick,.pin.peek{pointer-events:auto;cursor:pointer}
.pin.peek:hover .tag{transform:translateY(-3px);background:var(--ink);color:var(--paper)}
.pin.pick:hover .tag{transform:translateY(-2px)}
.pin.far{opacity:.45}
.pin.hidden{opacity:0;pointer-events:none}
.pin.mute .tag{opacity:0;pointer-events:none}
.pin.sel{z-index:2}
.pin.sel .tag{background:var(--ink);color:var(--paper);box-shadow:0 10px 22px -10px #343b36aa;font-size:13.5px;padding:7px 12px}
.pin.sel .dot{background:var(--coral);width:12px;height:12px;margin:0 0 -6px -6px}
.pin.enter .tag{animation:pop .55s var(--spring) both}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.5)}}

/* ---------- con ốc (ốc vườn bản 2, chỉ gắn khớp để cử động) ---------- */
.snail{position:fixed;left:0;top:0;width:var(--s,100px);z-index:12;pointer-events:auto;cursor:pointer;will-change:transform;
  transition:width .9s var(--out)}
.snail .hop{transform-origin:50% 100%}
.snail .face{transition:transform .45s var(--spring);transform-origin:50% 100%}
.snail.flip .face{transform:scaleX(-1)}
.snail svg{display:block;width:100%;height:auto;overflow:visible}
.snail .stalk{transform-box:view-box;animation:wob 2.6s ease-in-out infinite alternate}
.snail .stalk.r{animation-duration:3.1s;animation-delay:-.8s}
@keyframes wob{from{transform:rotate(-4deg)}to{transform:rotate(4deg)}}
.snail .eye{transform-box:view-box;transition:transform .09s}
.snail.blink .eye{transform:scaleY(.08)}
.snail .pupil{transition:transform .18s ease-out}
.snail .shell{transform-box:view-box;transform-origin:205px 290px}
.snail .torso{transform-box:view-box;transform-origin:40px 318px}
.snail.crawl .torso{animation:inch 1.25s ease-in-out infinite}
.snail.crawl .shell{animation:bob 1.25s ease-in-out infinite}
@keyframes inch{50%{transform:scaleX(1.045) scaleY(.985)}}
@keyframes bob{50%{transform:translateY(-4px) rotate(-1.5deg)}}
.snail.hopping .hop{animation:hop .9s var(--out)}
@keyframes hop{0%{transform:none}18%{transform:scaleY(.86) scaleX(1.08)}38%{transform:translateY(-22px) scaleY(1.06)}60%{transform:translateY(0) scaleY(.9) scaleX(1.06)}76%{transform:translateY(-8px)}100%{transform:none}}
.snail.hide .shell{transform:scale(1.04)}
.snail.hide .torso>*:not(.shell){opacity:0;transition:opacity .15s}

/* ---------- vệt tiến độ trên cùng ---------- */
.trip-line{position:fixed;left:0;right:0;top:0;height:3px;z-index:40;pointer-events:none;opacity:0;transition:opacity .4s}
.trip-line i{display:block;height:100%;width:var(--p,0%);background:var(--coral);border-radius:0 3px 3px 0}
body[data-step=trip] .trip-line,body[data-step=arrived] .trip-line{opacity:1}

/* ---------- tấm điều khiển dưới ---------- */
.sheet{position:fixed;left:50%;bottom:28px;width:min(540px,calc(100% - 32px));z-index:25;background:var(--paper);border-radius:26px;box-shadow:var(--lift);
  padding:20px 24px 24px;transform:translate(-50%,calc(100% + 60px));transition:transform .65s var(--out),height .5s var(--out)}
body[data-step=where] .sheet,body[data-step=learn] .sheet{transform:translate(-50%,0)}
.sheet-top{display:flex;align-items:center;gap:10px;margin-bottom:6px;min-height:32px}
.back{width:32px;height:32px;margin-left:-6px;border-radius:50%;display:grid;place-items:center;color:var(--muted)}
.back:hover{background:#343b360d;color:var(--ink)}
.sheet-title{font:400 22px/1.1 var(--serif);letter-spacing:-.03em}
.sheet .swap{animation:swapin .45s var(--out) both}
@keyframes swapin{from{opacity:0;transform:translateY(10px)}}

.picker{display:grid;grid-template-columns:48px 1fr 48px;align-items:center;margin:2px 0 18px}
.arrow{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--line2);transition:transform .2s var(--spring),background .2s,opacity .2s}
.arrow:hover{background:#343b360d}
.arrow:active{transform:scale(.9)}
.arrow:disabled{opacity:.25;cursor:default;background:none}
.pick-mid{text-align:center;min-width:0}
.bigmin{display:inline-flex;align-items:baseline;gap:6px;font:400 76px/1 var(--serif);letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.bigmin small{font:400 22px var(--serif);letter-spacing:-.02em;color:var(--muted)}
.bigmin .roll{display:inline-block}
.bigmin .roll.up{animation:rollup .45s var(--out)}
.bigmin .roll.down{animation:rolldown .45s var(--out)}
@keyframes rollup{from{opacity:0;transform:translateY(.5em)}}
@keyframes rolldown{from{opacity:0;transform:translateY(-.5em)}}
.place{margin-top:6px;font:italic 400 24px/1.15 var(--serif);color:var(--coral);letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.place-km{margin-top:6px;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}

.lib{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:2px;max-height:min(296px,33vh);overflow:auto;margin-right:-8px;padding-right:8px}
.item{width:100%;display:grid;grid-template-columns:52px 1fr 26px;gap:14px;align-items:center;padding:8px;border-radius:14px;text-align:left;transition:background .2s}
.item:hover{background:#343b360a}
.item img{width:52px;height:52px;border-radius:10px;object-fit:cover;box-shadow:0 0 0 1px var(--line)}
.item b{display:block;font-weight:500;font-size:14.5px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.item small{display:block;margin-top:3px;font-size:12.5px;color:var(--muted)}
.tick{width:24px;height:24px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line2);display:grid;place-items:center;color:transparent;transition:background .25s,box-shadow .25s,transform .3s var(--spring)}
.item.on .tick{background:var(--ink);box-shadow:none;color:var(--paper);transform:scale(1.06)}
.fill{display:flex;align-items:center;gap:12px;margin:14px 0 0;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.fill .bar{flex:1;height:6px;border-radius:6px;background:#343b3614;overflow:hidden}
.fill .bar i{display:block;height:100%;border-radius:6px;background:var(--teal);width:var(--w,0%);transition:width .5s var(--out)}
.ext{display:flex;align-items:center;gap:12px;margin:16px 0 14px;padding:12px 14px;border-radius:14px;background:#dae8df99;font-size:13.5px;line-height:1.35}
.ext .ic{color:var(--teal)}
.ext .ok{margin-left:auto;width:8px;height:8px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 4px #00838a26;flex:none}

/* xoá bài: hàng có nút thùng rác hiện khi rê chuột; xoá ngay, thanh Undo 5 giây (khuôn UndoToast của app) */
.lib li{position:relative;display:flex;align-items:center;transition:opacity .25s,transform .3s var(--out),max-height .3s .05s;max-height:90px}
.lib li .item{flex:1;min-width:0}
.lib li .del{flex:none;width:34px;height:34px;margin-left:2px;border-radius:50%;display:grid;place-items:center;color:var(--muted);opacity:0;transition:opacity .15s,background .15s,color .15s}
.lib li:hover .del,.lib li .del:focus-visible{opacity:1}
.lib li .del:hover{background:#a8402f14;color:#a8402f}
@media (hover:none){.lib li .del{opacity:.7}}
.lib li.going{opacity:0;transform:translateX(-24px);max-height:0;overflow:hidden}
.undo{position:fixed;left:50%;z-index:70;width:min(420px,calc(100% - 28px));height:56px;display:flex;align-items:stretch;border-radius:14px;background:var(--ink);color:var(--paper);
  box-shadow:0 10px 26px #0005;transform:translate(-50%,24px);opacity:0;pointer-events:none;transition:transform .35s var(--out),opacity .25s}
.undo.on{transform:translate(-50%,0);opacity:1;pointer-events:auto}
.undo>span{flex:1;display:flex;align-items:center;padding:0 16px;font-size:13.5px}
.undo button{position:relative;display:flex;align-items:center;gap:9px;padding:0 16px 0 12px;color:var(--paper);font-weight:600;font-size:13.5px;border-left:1px solid #f5f1e729}
.undo svg{position:absolute;left:12px;top:50%;width:34px;height:34px;margin-top:-17px;fill:none;stroke-width:2;transform:rotate(-90deg)}
.undo svg circle{stroke:#f5f1e733}
.undo svg .left{stroke:#f5f1e7d9;stroke-linecap:round;stroke-dasharray:94.25;stroke-dashoffset:0}
.undo.run svg .left{animation:undoring 5s linear forwards}
@keyframes undoring{to{stroke-dashoffset:94.25}}
.undo .i-undo{width:34px;background-position:center;-webkit-mask-size:13px 12px;mask-size:13px 12px}

/* chọn thời gian = quỹ giờ học */
.chips{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:4px 0 6px;font-size:13.5px;color:var(--muted)}
.chips>span{margin-right:4px}
.chip{display:inline-flex;align-items:center;height:32px;padding:0 13px;border-radius:20px;box-shadow:inset 0 0 0 1px var(--line2);font-size:13.5px;color:var(--ink);background:none;transition:background .2s,color .2s}
.chip:hover{background:#343b360a}
.chip.on{background:var(--ink);color:var(--paper);box-shadow:none}
.chip.own{gap:2px;padding:0 6px 0 12px}
.chip.own input{width:44px;border:0;background:none;font:inherit;color:inherit;outline:none;padding:0}
.chip.own input::placeholder{color:var(--muted)}
.chip.own select{border:0;background:none;font:inherit;color:inherit;outline:none;cursor:pointer}
.chip.own.on input::placeholder{color:#f5f1e7a6}
.sum{display:flex;align-items:center;gap:16px;margin:14px 0 2px}
.sum .bigmin{font-size:52px;flex:none}
.sum .bigmin small{font-size:19px}
.sum .place{margin:0;font-size:19px;line-height:1.25;white-space:normal;overflow:visible}
.empty-lib{margin:14px 0;color:var(--muted);font-size:14px}
.pin.end .tag{background:var(--coral);color:#fff;box-shadow:0 8px 18px -8px #d5564baa}
.pin.end .dot{background:var(--coral)}
.learned-h{margin:0 0 8px;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.learned{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:8px}
.learned li{display:grid;grid-template-columns:40px 1fr;gap:10px;align-items:center}
.learned img{width:40px;height:40px;border-radius:8px;object-fit:cover}
.learned b{display:block;font-weight:500;font-size:13px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.learned small{font-size:12px;color:var(--muted)}
.arrival .row .btn{flex:1}

/* nút Lock in: ổ khoá mở sập xuống thành khoá */
.lockbtn .lk{position:relative;width:20px;height:18px}
.lockbtn .lk .ic{position:absolute;left:50%;top:50%;transition:opacity .2s,transform .45s var(--spring)}
.lockbtn .lk .i-lock-open{transform:translate(-40%,-50%)}
.lockbtn .lk .i-lock{transform:translate(-50%,-50%) scale(.4);opacity:0}
.lockbtn.closing .lk .i-lock-open{opacity:0;transform:translate(-40%,-50%) scale(.5)}
.lockbtn.closing .lk .i-lock{opacity:1;transform:translate(-50%,-50%) scale(1.15)}
.lockbtn.closing{background:var(--coral);border-color:var(--coral)}

/* ---------- dải tab trình duyệt lúc khoá ---------- */
.tabs{position:fixed;top:0;z-index:50;display:flex;gap:6px;align-items:flex-end;padding:10px 10px 0;
  left:auto;right:28px;width:calc(100% - 228px);max-width:1180px;background:#c5d5cb;border-radius:0 0 18px 18px;box-shadow:0 18px 40px -20px #343b3680;
  transform:translateY(-115%);transition:transform .6s var(--out)}
.tabs.on{transform:none}
.tab{position:relative;flex:1 1 0;min-width:0;display:flex;align-items:center;gap:9px;height:50px;padding:0 74px 0 14px;border-radius:12px 12px 0 0;background:#e4ece7;font-size:13.5px;color:var(--ink);white-space:nowrap;overflow:hidden}
.tab span{overflow:hidden;text-overflow:ellipsis;transition:color .2s}
.tab i{flex:none;width:20px;height:20px;border-radius:50%;background:#343b361a;display:grid;place-items:center;font:600 10.5px var(--sans);font-style:normal;color:var(--ink)}
.tab.current{background:var(--paper);flex-grow:1;padding-right:14px}
.tab.current img{width:17px}
.tab .pm{position:absolute;right:6px;top:50%;width:70px;height:50px;color:var(--coral);pointer-events:none;opacity:0;transform:translateY(-50%) scale(1.9) rotate(-14deg);transform-origin:80% 50%;mix-blend-mode:multiply}
.tab.stamped .pm{opacity:1;transform:translateY(-50%) rotate(-5deg);transition:transform .3s cubic-bezier(.3,1.6,.5,1),opacity .1s}
.tab span{background:linear-gradient(var(--coral),var(--coral)) 0 55%/0% 2px no-repeat;transition:color .2s,background-size .35s .1s}
.tab.stamped span{color:#343b3680;background-size:100% 2px}
.tab.stamped i{opacity:.5}
.tabs.fold .tab.bad{transition:transform .55s cubic-bezier(.6,0,.3,1),opacity .45s .12s;opacity:0}
.tabs.shake{animation:shake .16s}
@keyframes shake{30%{transform:translateY(3px)}70%{transform:translateY(-1px)}}

/* ---------- HUD: khoá + giờ còn lại + km ---------- */
.hud{position:fixed;left:50%;top:20px;z-index:45;display:flex;align-items:center;gap:14px;padding:10px 12px 10px 16px;border-radius:18px;background:var(--ink);color:var(--paper);
  box-shadow:0 18px 36px -16px #343b36cc;transform:translate(-50%,-140%);opacity:0;transition:transform .7s var(--spring),opacity .3s}
body[data-step=trip] .hud,body[data-step=arrived] .hud{transform:translate(-50%,0);opacity:1}
.hud-lock{position:relative;width:20px;height:20px;color:var(--coral)}
.hud-lock .ic{position:absolute;left:50%;top:50%;transition:opacity .25s,transform .5s var(--spring)}
.hud-lock .i-lock{transform:translate(-50%,-50%)}
.hud-lock .i-lock-open{transform:translate(-40%,-50%) scale(.4);opacity:0}
body[data-step=arrived] .hud-lock .i-lock{opacity:0;transform:translate(-50%,-50%) scale(.4)}
body[data-step=arrived] .hud-lock .i-lock-open{opacity:1;transform:translate(-40%,-50%) scale(1)}
body[data-step=arrived] .hud-lock{color:var(--paper)}
body[data-step=arrived] .hud-sites,body[data-step=arrived] .hud-sep:last-of-type{display:none}
.hud b{font:400 26px/1 var(--serif);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.hud small{font-size:12px;color:#f5f1e78c;margin-left:6px}
.hud-time,.hud-km{display:flex;align-items:baseline;white-space:nowrap}
.hud-sep{width:1px;height:22px;background:#f5f1e72a}
.hud-sites{display:flex;align-items:baseline;padding:6px 8px;margin:-6px -4px -6px -6px;border-radius:12px;color:inherit;white-space:nowrap}
.hud-sites:hover{background:#f5f1e714}
.hud-sites b{color:var(--paper)}
.hud-sites.pop b{animation:facein .5s var(--spring) both}
@keyframes facein{from{transform:scale(0)}}
.hud-pop{position:absolute;right:0;top:calc(100% + 10px);width:250px;padding:14px 16px;border-radius:14px;background:var(--paper);color:var(--ink);box-shadow:var(--lift);font-size:13.5px;line-height:1.4}
.hud-pop ul{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px;color:var(--muted)}
.hud-pop li{display:flex;align-items:center;gap:8px}
.hud-pop li .ic{color:var(--coral)}
.odo{display:inline-flex;overflow:hidden;height:1em}
.odo .d{display:inline-block;height:1em;overflow:hidden}
.odo .col{display:flex;flex-direction:column;transition:transform .32s var(--out)}
.odo.fast .col{transition:none}
.odo .col span,.odo .c{height:1em;line-height:1}
.hud.nudge{animation:nudge .45s}
@keyframes nudge{20%{transform:translate(calc(-50% - 6px),0)}40%{transform:translate(calc(-50% + 6px),0)}60%{transform:translate(calc(-50% - 3px),0)}80%{transform:translate(calc(-50% + 2px),0)}}

/* ---------- reader ---------- */
.reader{position:fixed;left:28px;top:84px;bottom:24px;width:min(640px,46vw);z-index:22;background:var(--paper);border-radius:24px;box-shadow:var(--lift);
  overflow:auto;padding:40px 52px 44px;transform:translateX(calc(-100% - 60px));transition:transform .8s var(--out);scrollbar-width:thin}
body[data-step=trip] .reader,body[data-step=arrived] .reader{transform:none}
.r-meta{display:flex;justify-content:space-between;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.reader h2{font:400 40px/1.06 var(--serif);letter-spacing:-.04em;margin:16px 0 22px}
.reader .cover{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:14px;margin-bottom:26px}
.reader p{font:400 19px/1.62 var(--serif);margin:0 0 20px;color:#343b36f0}
.r-end{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:34px;padding-top:22px;border-top:1px solid var(--line)}
.r-end a{color:var(--muted);font-size:13.5px}
.i-pause{--m:url(assets/icons/pause.png);width:12px;height:14px}
.i-trash{--m:url(assets/icons/trash.png);width:14px;height:16px}
.i-undo{--m:url(assets/icons/undo.png);width:13px;height:12px}
.r-video{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#000;margin-bottom:22px}
.r-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.r-audio{border-radius:16px;overflow:hidden;background:var(--ink);margin-bottom:22px}
.r-audio img{width:100%;aspect-ratio:16/9;object-fit:cover}
.ap{display:flex;align-items:center;gap:14px;padding:14px 18px;color:var(--paper)}
.ap-play{width:44px;height:44px;border-radius:50%;background:var(--paper);color:var(--ink);display:grid;place-items:center;flex:none}
.ap-play .i-pause,.r-audio.playing .ap-play .i-play{display:none}
.r-audio.playing .ap-play .i-pause{display:inline-block}
.ap-seek{flex:1;accent-color:var(--coral)}
.ap-time{font-size:12.5px;color:#f5f1e7a6;font-variant-numeric:tabular-nums;white-space:nowrap}
.r-media{position:relative;border-radius:14px;overflow:hidden;margin-bottom:22px}
.r-media img{width:100%;aspect-ratio:16/9;object-fit:cover}
.r-media a{position:absolute;inset:auto auto 16px 16px;display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:30px;background:var(--paper);color:var(--ink);text-decoration:none;font-size:14px;box-shadow:0 10px 20px -10px #000a}
.reader .turn{animation:turn .6s var(--out) both}
@keyframes turn{from{opacity:0;transform:translateX(40px)}}
.more{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:4px}

/* ---------- tới nơi ---------- */
.arrival{position:fixed;right:40px;top:96px;width:340px;z-index:26;background:var(--paper);border-radius:24px;box-shadow:var(--lift);padding:26px 26px 24px;
  opacity:0;transform:translateY(24px) scale(.94);pointer-events:none;transition:opacity .4s,transform .7s var(--spring)}
.arrival.on{opacity:1;transform:none;pointer-events:auto}
.arrival h2{font:400 46px/.98 var(--serif);letter-spacing:-.05em;margin:0}
.arrival h2 em{display:block;color:var(--coral)}
.arrival .meta{margin:14px 0 18px;font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.stamps{display:flex;align-items:center;gap:8px;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:18px}
.stamps figure{position:relative;margin:0;width:38px}
.stamps img{width:38px;height:auto;filter:drop-shadow(0 2px 3px #343b3633)}
.stamps .new figcaption{position:absolute;left:50%;top:-9px;transform:translateX(-50%);background:var(--coral);color:#fff;font-size:9.5px;font-weight:600;padding:2px 5px;border-radius:5px;letter-spacing:.02em}
.stamps .empty{width:34px;height:42px;border-radius:4px;border:1.5px dashed #343b3633}
.stamps span{margin-left:auto;font-size:12.5px;color:var(--muted);white-space:nowrap}
.arrival .row{display:flex;gap:10px}
.arrival .row .btn{flex:1;padding:14px 16px}

/* tem dán lên bản đồ lúc tới */
.mapstamp{position:absolute;left:0;top:0;width:68px;pointer-events:none;will-change:transform}
.mapstamp .inner{transform-origin:50% 50%}
.mapstamp img{width:68px;filter:drop-shadow(0 6px 8px #343b3640)}
.mapstamp svg{position:absolute;left:-34px;top:-20px;width:110px;height:110px;color:var(--coral);mix-blend-mode:multiply;opacity:0}
.mapstamp.drop .inner{animation:stampdrop .55s cubic-bezier(.3,1.5,.5,1) both}
.mapstamp.drop svg{animation:postmark .35s .5s cubic-bezier(.3,1.6,.5,1) both}
@keyframes stampdrop{from{opacity:0;transform:scale(2.6) rotate(-22deg) translateY(-30px)}to{transform:rotate(-7deg)}}
@keyframes postmark{from{opacity:0;transform:scale(1.6) rotate(10deg)}to{opacity:.9;transform:rotate(-4deg)}}
.flash{position:fixed;inset:0;z-index:60;pointer-events:none;background:radial-gradient(circle at var(--x) var(--y),#f5f1e7cc,#f5f1e700 40%);animation:flash .7s ease-out forwards}
@keyframes flash{from{opacity:1}to{opacity:0}}

/* =========================================================
   Ba hướng visual (?look=a|b|c). Cùng flow, cùng luật.
   ========================================================= */

/* a · Niêm thư: lock in = gập nắp phong bì, ấn dấu sáp */
.seal{position:fixed;inset:0;z-index:55;display:grid;place-content:center;justify-items:center;background:#dae8dfcc;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity .35s}
.seal.on{opacity:1}
.seal.gone{opacity:0;transition:opacity .45s}
.seal .env{position:relative;width:432px;height:540px;margin-top:-170px;transition:transform .65s cubic-bezier(.6,0,.3,1)}
.seal .env>img{position:absolute;inset:0;width:100%;height:100%}
.seal .flap-open{transform-origin:50% 48.7%;transition:transform .28s ease-in}
.seal.shut .flap-open{transform:scaleY(0)}
.seal .flap-closed{transform-origin:50% 47.3%;transform:scaleY(0);transition:transform .3s .26s cubic-bezier(.3,1.4,.5,1)}
.seal.shut .flap-closed{transform:scaleY(1)}
.seal .cards{position:absolute;inset:0}
.seal .card{position:absolute;left:50%;top:262px;width:132px;aspect-ratio:16/10;object-fit:cover;border:5px solid var(--paper);border-radius:4px;box-shadow:0 8px 18px -8px #343b3680;
  opacity:0;transform:translate(-50%,-300px) rotate(var(--r));transition:transform .6s cubic-bezier(.3,1.2,.4,1),opacity .2s}
.seal .card.c0{--r:-7deg;margin-left:-58px}.seal .card.c1{--r:5deg;margin-left:46px;margin-top:6px}.seal .card.c2{--r:-2deg;margin-top:-10px}
.seal.fill .card{opacity:1;transform:translate(-50%,0) rotate(var(--r))}
.seal.fill .card.c1{transition-delay:.22s}.seal.fill .card.c2{transition-delay:.44s}
.seal .press{position:absolute;left:50%;top:69.5%;width:60px;height:60px;margin:-30px 0 0 -30px;border-radius:50%;box-shadow:0 0 0 3px var(--coral);opacity:0}
.seal.pressed .press{animation:press .7s ease-out}
@keyframes press{0%{opacity:.9;transform:scale(.6)}100%{opacity:0;transform:scale(2.4)}}
.seal.pressed .env{animation:thud .3s}
@keyframes thud{40%{transform:scale(.975) translateY(4px)}}
.seal-note{display:flex;align-items:center;gap:9px;margin:-150px 0 0;font-size:15px;color:var(--ink);opacity:0;transform:translateY(8px);transition:opacity .3s,transform .4s var(--out)}
.seal-note .ic{color:var(--coral)}
.seal.pressed .seal-note{opacity:1;transform:none}
.seal.fly .seal-note{opacity:0}
.parcel{position:absolute;left:30%;top:-6%;width:46%;transform:rotate(-9deg) scale(0);transform-origin:50% 90%;filter:drop-shadow(0 4px 4px #343b3640);transition:transform .45s var(--spring)}
body[data-look=a][data-step=trip] .parcel{transform:rotate(-9deg) scale(1)}

/* b · Tranh gommie.page: mây góc, nhãn viết tay có mũi tên, nét bản đồ đậm */
.cloud{position:fixed;z-index:21;pointer-events:none;filter:drop-shadow(0 8px 0 #9cbab824);transition:transform 1s var(--out)}
.cloud.fan{width:480px;right:-170px;top:-150px;transform:rotate(18deg)}
.cloud.tail{width:430px;left:-250px;top:300px;transform:rotate(-12deg)}
.cloud.compact{width:330px;right:-130px;bottom:-90px;transform:rotate(-8deg)}
body[data-look=b]:not([data-step=home]) .cloud.fan{transform:translate(120px,-60px) rotate(18deg)}
body[data-look=b]:not([data-step=home]) .cloud.tail{transform:translate(-160px,0) rotate(-12deg)}
body[data-look=b][data-step=trip] .cloud.compact,body[data-look=b][data-step=arrived] .cloud.compact{transform:translate(40px,30px) rotate(-8deg)}
body[data-look=b] .pin .in{transform:translate(-50%,calc(-100% - 34px))}
body[data-look=b] .pin .tag{background:none;box-shadow:none;padding:0;font:400 21px/1 'Bradley Hand',cursive;color:var(--ink);gap:0;position:relative}
body[data-look=b] .pin .tag b{font-weight:400;color:var(--coral);margin-left:8px}
body[data-look=b] .pin .tag b:before{display:none}
body[data-look=b] .pin .tag:after{content:'';position:absolute;left:50%;top:100%;width:30px;height:30px;margin-left:-4px;background:currentColor;opacity:.75;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M3 3c11 1 15 8 9 15' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3Cpath d='M8 15l4 4 5-3' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%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 30 30'%3E%3Cpath d='M3 3c11 1 15 8 9 15' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3Cpath d='M8 15l4 4 5-3' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
body[data-look=b] .pin.sel .tag{background:none;box-shadow:none;color:var(--coral);font-size:25px;padding:0}
body[data-look=b] .pin.sel .tag b{color:var(--coral)}
body[data-look=b] .pin.sel .tag:before{content:'';position:absolute;left:-2px;right:-2px;bottom:-7px;height:7px;background:var(--coral);opacity:.85;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpath d='M1 5c20-4 45-4 98-1' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpath d='M1 5c20-4 45-4 98-1' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat}
body[data-look=b] .pin.peek:hover .tag{background:none;color:var(--coral)}
body[data-look=b] .pin.home .in{transform:translate(-50%,16px)}
body[data-look=b] .pin.home .tag{font-size:23px}
body[data-look=b] .pin.home .tag:after{display:none}
body[data-look=b] .pin.left .in{transform:translate(calc(-100% - 22px),-50%)}
body[data-look=b] .pin.right .in{transform:translate(22px,-50%)}
body[data-look=b] .pin.left .tag:after,body[data-look=b] .pin.right .tag:after{display:none}
body[data-look=b] .pin .dot{bottom:-34px}

/* c · Góc nhìn ốc: bản đồ nghiêng như mặt đất, chân trời mờ */
body[data-look=c]{background:linear-gradient(#eef4f0 0,#e3ede7 30%,#dae8df 55%)}
body[data-look=c] #map{inset:auto;-webkit-mask:linear-gradient(#0000 0,#0000 9%,#000 30%);mask:linear-gradient(#0000 0,#0000 9%,#000 30%)}
body[data-look=c] .veil{display:none}
body[data-look=c] .hero{top:64px}

/* ---------- điện thoại ---------- */
@media (max-width:760px){
  .brand{left:18px;top:18px}
  .hero{top:70px;padding:0 16px}
  .hero h1{font-size:39px}
  body[data-step=trip] .brand,body[data-step=arrived] .brand{opacity:0;pointer-events:none}
  .hero .sub{font-size:16px;margin:14px 0 20px}
  .veil{height:380px}
  .sheet{bottom:0;width:100%;border-radius:24px 24px 0 0;padding:16px 18px calc(20px + env(safe-area-inset-bottom))}
  .bigmin{font-size:60px}
  .place{font-size:21px}
  .reader{left:0;right:0;width:auto;top:236px;bottom:0;border-radius:22px 22px 0 0;padding:28px 22px 40px}
  .reader h2{font-size:30px}
  .reader p{font-size:18px}
  .hud{top:10px;gap:10px;padding:8px 10px 8px 12px;border-radius:14px}
  .hud b{font-size:21px}
  .hud small{display:none}
  .hud-sites{display:none}
  .hud-sep:last-of-type{display:none}
  .arrival{left:12px;right:12px;top:auto;bottom:12px;width:auto;padding:22px}
  .arrival h2{font-size:38px}
  .tabs{left:8px;right:8px;width:auto;padding:8px 8px 0}
  .tab:nth-child(n+5){display:none}
  .tab.current{flex:0 0 44px;padding:0 13px}
  .tab.current span{display:none}
  .tab{padding-right:22px;font-size:12.5px}
  .tab .pm{right:-6px}
  .seal .env{transform:scale(.72)}
  .cloud.fan{width:300px;right:-150px;top:-110px}.cloud.tail{width:260px;left:-190px;top:240px}.cloud.compact{width:220px}
}
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* =========================================================
   Điều hướng 3 tab (chốt 20/10): Trip · Library · Leaderboard. Lock in thì ẩn.
   ========================================================= */
.topnav{position:fixed;left:50%;top:22px;z-index:41;transform:translateX(-50%);display:flex;gap:4px;padding:4px;border-radius:24px;background:var(--paper);
  box-shadow:0 0 0 1px var(--line),0 8px 20px -12px #343b3680;transition:opacity .35s,transform .5s var(--out)}
.topnav button{padding:9px 20px;border-radius:20px;font-size:14.5px;color:var(--muted);transition:background .2s,color .2s}
.topnav button:hover{color:var(--ink)}
.topnav button.on{background:var(--ink);color:var(--paper)}
body[data-step=trip] .topnav{opacity:0;transform:translate(-50%,-20px);pointer-events:none}
.hero{top:120px}

/* ---------- Library ---------- */
.libpage{position:fixed;left:28px;top:92px;bottom:24px;width:min(720px,52vw);z-index:22;background:var(--paper);border-radius:24px;box-shadow:var(--lift);padding:30px 36px;overflow:auto;
  opacity:0;transform:translateX(-30px);pointer-events:none;transition:opacity .35s,transform .6s var(--out)}
body[data-step=library] .libpage{opacity:1;transform:none;pointer-events:auto}
.lp-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}
.lp-top h2{margin:0;font:400 40px/1 var(--serif);letter-spacing:-.04em}
.lp-search{width:260px;height:38px;padding:0 16px;border:0;border-radius:20px;background:none;box-shadow:inset 0 0 0 1px var(--line2);font:inherit;font-size:13.5px;color:var(--ink);outline:none}
.lp-search:focus{box-shadow:inset 0 0 0 1.5px var(--teal)}
.libpage h3{margin:22px 0 6px;font:500 12px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.libpage h3 small{font-size:12px;margin-left:4px}
.lp{list-style:none;margin:0;padding:0}
.lp button{width:100%;display:grid;grid-template-columns:56px 1fr 12px;gap:14px;align-items:center;padding:9px 8px;border-radius:14px;text-align:left;transition:background .2s}
.lp button:hover{background:#343b360a}
.lp button:disabled{cursor:default;opacity:.6}
.lp button:disabled .ic{visibility:hidden}
.lp button .ic{color:var(--muted)}
.lp img{width:56px;height:56px;border-radius:10px;object-fit:cover}
.lp b{display:block;font-weight:500;font-size:15px;line-height:1.3}
.lp small{display:block;margin-top:3px;font-size:13px;color:var(--muted)}

/* ---------- Leaderboard: thẻ hạng + ốc ma ---------- */
.lbcard{position:fixed;left:40px;top:92px;width:420px;z-index:26;background:var(--paper);border-radius:24px;box-shadow:var(--lift);padding:22px 26px 18px;
  opacity:0;transform:translateX(-30px);pointer-events:none;transition:opacity .35s,transform .6s var(--out)}
body[data-step=board] .lbcard{opacity:1;transform:none;pointer-events:auto}
.lbcard-h{display:flex;align-items:baseline;justify-content:space-between}
.lbcard-h small{font-size:12.5px;color:var(--muted)}
.lbcard .big{display:flex;align-items:baseline;gap:4px;margin:8px 0 0;font:400 80px/.9 var(--serif);letter-spacing:-.05em}
.lbcard .big small{font:400 24px var(--serif);letter-spacing:-.02em;color:var(--muted)}
.lbcard .me-sum{margin-left:auto;font:400 15px/1.35 var(--sans);color:var(--ink);text-align:right;letter-spacing:0}
.lbcard-line{display:flex;gap:12px;align-items:center;margin:14px 0 12px;padding:12px 14px;border-radius:14px;background:#dae8df99;font-size:14px;line-height:1.4}
.lbcard-line img{width:44px;opacity:.55;filter:grayscale(.6);flex:none}
.lbt-h,.lbt li{display:grid;grid-template-columns:26px 1fr 70px 70px;gap:8px;align-items:center}
.lbt-h{padding:0 10px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:right}
.lbt{list-style:none;margin:4px 0 0;padding:0}
.lbt li{padding:6px 10px;border-radius:10px;font-size:14px}
.lbt .r{color:var(--muted);text-align:right;font-variant-numeric:tabular-nums;font-size:13px}
.lbt b{font-weight:500}
.lbt .km,.lbt .c{text-align:right;font-variant-numeric:tabular-nums}
.lbt .c{color:var(--muted)}
.lbt .top .r{color:var(--coral);font-weight:600}
.lbt .me{background:var(--ink);color:var(--paper)}
.lbt .me .r,.lbt .me .c{color:#f5f1e7a6}
.lbt .gap{display:block;padding:0 0 0 44px;color:var(--muted);letter-spacing:.2em;line-height:1}
.lb-foot{margin:10px 0 0;font-size:11.5px;color:var(--muted);text-align:center}
.pin.ghost .tag{background:#f5f1e7e6;font-size:13px;padding:5px 10px 5px 6px;gap:6px;align-items:center}
.pin.ghost .tag img{width:34px;opacity:.55;filter:grayscale(.6);margin:-4px 0}
.pin.ghost .tag img+img{margin-left:-22px}
.pin.ghost .dot{background:#343b3666}

@media (max-width:760px){
  .topnav{left:auto;right:12px;top:14px;transform:none}
  body[data-step=trip] .topnav{transform:translateY(-20px)}
  .topnav button{padding:7px 11px;font-size:13px}
  .brand img:last-child{display:none}
  .hero{top:84px}
  .libpage{left:0;right:0;top:66px;bottom:0;width:auto;border-radius:22px 22px 0 0;padding:22px 18px}
  .lp-top{flex-wrap:wrap}.lp-search{width:100%}
  .lbcard{left:0;right:0;top:auto;bottom:0;width:auto;border-radius:22px 22px 0 0;padding:18px 18px 22px}
  .lbcard .big{font-size:56px}
  .lbcard-line{display:none}
}
/* ốc ma trong chuyến: nhỏ hơn, người đã bị vượt thì mờ hẳn */
body[data-step=trip] .pin.ghost .tag{font-size:12px;padding:3px 8px 3px 4px}
body[data-step=trip] .pin.ghost .tag img{width:26px}
.pin.ghost.passed{opacity:.45}