/* 新手導覽：聚光燈＋吉祥物說明卡 */
.tr-shade { position:fixed; z-index:9600; pointer-events:none; border-radius:14px; box-shadow:0 0 0 4px #75F0CD, 0 0 26px 6px rgba(117,240,205,.75); transition:left .35s cubic-bezier(.3,.8,.3,1), top .35s cubic-bezier(.3,.8,.3,1), width .35s, height .35s; animation:trPulse 1.6s ease-in-out infinite; }
@keyframes trPulse { 0%,100% { box-shadow:0 0 0 4px #75F0CD, 0 0 22px 4px rgba(117,240,205,.6); } 50% { box-shadow:0 0 0 7px #75F0CD, 0 0 32px 10px rgba(117,240,205,.85); } }
.tour-block { position:fixed; inset:0; touch-action:none; z-index:9590; background:rgba(18,62,53,.6); transition:clip-path .35s cubic-bezier(.3,.8,.3,1); }
.tr-tip { overflow-y:auto; overscroll-behavior:contain; position:fixed; z-index:9610; width:min(380px, calc(100vw - 24px)); background:#fff; border:2px solid #123E35; border-radius:16px; padding:14px 16px 12px 84px; box-shadow:0 6px 22px rgba(18,62,53,.09); animation:trIn .35s cubic-bezier(.2,.9,.3,1.2); }
@keyframes trIn { from { opacity:0; transform:translateY(10px) scale(.96); } }
.tr-tip img { position:absolute; left:8px; bottom:6px; width:68px; animation:mascotBob 1.4s ease-in-out infinite; filter:drop-shadow(0 3px 0 rgba(18,62,53,.2)); }
@keyframes mascotBob { 0%,100% { transform:translateY(0) rotate(-3deg); } 50% { transform:translateY(-6px) rotate(3deg); } }
.tr-tip h4 { margin:0 0 4px; font:800 16px/1.3 'Rubik','ResourceHanRoundedCN',sans-serif; color:#123E35; }
.tr-tip p { margin:0 0 10px; font:500 14px/1.6 'Rubik','ResourceHanRoundedCN',sans-serif; color:#3D5A52; }
.tr-foot { display:flex; align-items:center; gap:8px; flex-wrap:nowrap; white-space:nowrap; }
.tr-dots { display:flex; gap:5px; flex:1 1 auto; min-width:0; overflow:hidden; } .tr-dots i { flex:none; width:8px; height:8px; border-radius:50%; background:#CFE7DF; } .tr-dots i.on { background:#2DA888; width:18px; border-radius:6px; }
.tr-btn { flex:none; white-space:nowrap; word-break:keep-all; cursor:pointer; padding:8px 14px; border:2px solid #123E35; border-radius:12px; background:#fff; font:800 13px/1 'Rubik','ResourceHanRoundedCN',sans-serif; color:#123E35; }
.tr-btn.go { background:var(--modo-emerald, #75F0CD); } .tr-btn:hover { background:#75F0CD; }
.tr-skip { white-space:nowrap; position:absolute; top:8px; right:12px; border:none; background:none; cursor:pointer; font:700 12px/1 'Rubik','ResourceHanRoundedCN',sans-serif; color:#7A9E94; }
.tr-help { position:fixed; right:16px; bottom:calc(var(--bottom-nav-height, 0px) + var(--tv-side, 0px) + 14px); z-index:8800; width:46px; height:46px; border-radius:50%; border:2px solid #123E35; background:#75F0CD; color:#123E35; font:900 22px/1 'Rubik',sans-serif; cursor:pointer; box-shadow:0 6px 22px rgba(18,62,53,.09); display:flex; align-items:center; justify-content:center; }
.tr-help:hover { transform:translateY(-2px) rotate(-6deg); }
.tr-menu { position:fixed; right:16px; bottom:calc(var(--bottom-nav-height, 0px) + var(--tv-side, 0px) + 72px); z-index:8801; width:min(300px, calc(100vw - 32px)); background:#fff; border:2px solid #123E35; border-radius:16px; padding:14px; box-shadow:0 6px 22px rgba(18,62,53,.09); animation:trIn .25s ease; }
.tr-menu[hidden] { display:none; }
.tr-menu h4 { margin:0 0 8px; font:800 15px/1.3 'Rubik','ResourceHanRoundedCN',sans-serif; color:#123E35; }
.tr-menu ul { list-style:none; margin:0 0 10px; padding:0; display:flex; flex-direction:column; gap:6px; }
.tr-menu li { font:600 13px/1.5 'Rubik','ResourceHanRoundedCN',sans-serif; color:#3D5A52; padding-left:22px; position:relative; } .tr-menu li::before { content:''; position:absolute; left:4px; top:7px; width:9px; height:9px; background:#2DA888; border:2px solid #123E35; border-radius:12px; }
/* 新手護照 */
.pp { position:relative; display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:center; padding:var(--space-3); margin:0 0 var(--space-3); border:2px solid #123E35; border-radius:14px; background:linear-gradient(135deg,#F4FAF7,#E5F9F2); box-shadow:0 6px 22px rgba(18,62,53,.09); }
.pp-ring { width:78px; height:78px; border-radius:50%; background:conic-gradient(#2DA888 calc(var(--v, 0) * 1%), #DDE9E5 0); display:flex; align-items:center; justify-content:center; border:2px solid #123E35; }
.pp-ring b { width:58px; height:58px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; font:900 18px/1 'Rubik',sans-serif; color:#123E35; }
.pp h3 { margin:0 0 2px; font:800 18px/1.3 'Rubik','ResourceHanRoundedCN',sans-serif; color:#123E35; } .pp > div > p { margin:0 0 10px; font:500 13px/1.5 'Rubik','ResourceHanRoundedCN',sans-serif; color:#3D5A52; }
.pp-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px; }
.pp-q { display:flex; align-items:center; gap:8px; padding:8px 10px; border:2px solid #123E35; border-radius:10px; background:#fff; text-decoration:none; color:#123E35; font:700 13px/1.3 'Rubik','ResourceHanRoundedCN',sans-serif; transition:transform .15s; }
.pp-q:hover { transform:translateY(-2px); background:#F4FAF7; }
.pp-q i { flex:none; width:22px; height:22px; border-radius:50%; border:2px solid #123E35; background:#fff; display:flex; align-items:center; justify-content:center; font-style:normal; font-size:13px; }
.pp-q.done { background:#D9F7EE; } .pp-q.done i { background:#2DA888; color:#fff; } .pp-q.done { text-decoration:line-through; color:#5E7C74; }
@media (max-width:640px) { .pp { grid-template-columns:1fr; text-align:center; } .pp-ring { margin:0 auto; } }
@media (prefers-reduced-motion: reduce) { .tr-shade, .tr-tip img { animation:none; } }

/* 彈窗（例如數字人製作精靈）打開時收起右下角「?」，免得蓋住「完成並發佈」等按鈕，撳落去只會彈出說明 */
body:has(.modal-overlay:not([style*="none"])) .tr-help,
body:has(.modal-overlay:not([style*="none"])) .tr-menu { display:none; }