/* 重看導覽鈕:橫幅左側,與右側 #lang 對稱(橫幅 pointer-events:none,按鈕自己開回來;::after 撐大點擊區) */
#tourBtn{position:absolute;top:calc(4px + env(safe-area-inset-top,0px));left:calc(8px + env(safe-area-inset-left,0px));min-width:38px;height:35px;padding:0;font-size:1.25rem;line-height:1;pointer-events:auto}
#tourBtn::after{content:'';position:absolute;inset:-5px}
@media (hover:hover) and (pointer:fine){#tourBtn{cursor:pointer}}

/* ---------- 新手導覽 ---------- */
#tour{position:fixed;inset:0;z-index:500;overflow:hidden;animation:tFade .25s ease-out}
@keyframes tFade{from{opacity:0}to{opacity:1}}
#tour.wait .t-spot,#tour.wait .t-arrow,#tour.wait .t-word{opacity:0;animation:none}
#tour:not(.wait) .t-spot,#tour:not(.wait) .t-arrow,#tour:not(.wait) .t-word{animation:tFade .22s ease-out}
.t-spot{position:absolute;left:0;top:0;width:0;height:0;border:3px solid var(--spot);border-radius:255px 15px 225px 15px/15px 225px 15px 255px;box-shadow:0 0 0 9999px var(--dim);pointer-events:none}
.t-arrow{position:absolute;width:100px;height:120px;pointer-events:none}
.t-arrow svg{display:block;width:100%;height:100%;overflow:visible}
#tour.above .t-arrow svg{transform:scaleY(-1)}
.t-arrow path,.t-ic path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.t-arrow .o{stroke:var(--tour-o);stroke-width:15}
.t-arrow .i{stroke:var(--tour-i);stroke-width:8}
.t-word{position:absolute;display:flex;align-items:center;gap:8px;width:max-content;max-width:min(300px,calc(100vw - 32px));pointer-events:none;transform:translate(-50%,0);font-family:Impact,'Anton','Arial Narrow Bold','Haettenschweiler',sans-serif;font-weight:400;font-size:1.75rem;line-height:1.2;letter-spacing:1px;text-align:center;text-transform:uppercase;color:var(--ttl-fill);-webkit-text-stroke:5px var(--ttl-stroke);paint-order:stroke fill;filter:var(--ttl-filter)}
#tour.above .t-word{transform:translate(-50%,-100%)}
@supports not (paint-order:stroke fill){.t-word{-webkit-text-stroke:0;text-shadow:-3px 0 var(--ttl-stroke),3px 0 var(--ttl-stroke),0 -3px var(--ttl-stroke),0 3px var(--ttl-stroke),-2px -2px var(--ttl-stroke),2px -2px var(--ttl-stroke),-2px 2px var(--ttl-stroke),2px 2px var(--ttl-stroke)}}
.t-tx{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;min-width:0;overflow-wrap:anywhere}
.t-ic{display:block;width:40px;height:40px;flex:none}
.t-ic svg{display:block;width:100%;height:100%;overflow:visible}
.t-ic .o{stroke:var(--tour-o);stroke-width:12}
.t-ic .i{stroke:var(--tour-i);stroke-width:6}
.t-ic .f{fill:var(--tour-o);stroke:var(--tour-i);stroke-width:3.5}
.t-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.t-skip{position:absolute;top:calc(10px + env(safe-area-inset-top,0px));right:calc(10px + env(safe-area-inset-right,0px));width:48px;height:48px;padding:0;display:grid;place-items:center}
.t-bar{position:absolute;left:0;right:96px;bottom:calc(22px + env(safe-area-inset-bottom,0px));display:flex;justify-content:center;align-items:center;gap:14px;pointer-events:none}
@media (min-width:600px){.t-bar{right:0}}
.t-next{pointer-events:auto;width:56px;height:48px;padding:0;display:grid;place-items:center}
.t-dots{display:flex;align-items:center;gap:10px}
.t-dot{width:12px;height:12px;border:3px solid var(--line);background:var(--bg);border-radius:50%}
.t-dot.on{width:16px;height:16px;background:var(--fg);border-color:var(--bg)}
@media (hover:hover) and (pointer:fine){.t-skip,.t-next,#tour{cursor:pointer}}
@media (prefers-reduced-motion:reduce){#tour,#tour .t-spot,#tour .t-arrow,#tour .t-word{animation:none!important}}