/* ==========================================================================
   新手引导：聚光灯 + 底部/顶部教练卡
   ========================================================================== */

.tour-layer{position:fixed;inset:0;z-index:90;pointer-events:none}
/* 引导期间把 Toast 挪到卡片对面，避免遮住教练卡 */
body.tour-open .toast-stack{top:78px;bottom:auto}
body.tour-open.tour-card-top .toast-stack{top:auto;bottom:22px}
.tour-layer.no-target::before{
  content:"";position:fixed;inset:0;background:rgba(1,6,8,.78);
  backdrop-filter:blur(2px);
}
.tour-spot{
  position:fixed;border-radius:16px;pointer-events:none;
  box-shadow:
    0 0 0 9999px rgba(1,6,8,.76),
    0 0 0 1px rgba(184,220,196,.46),
    0 0 34px rgba(184,220,196,.18);
  transition:top .28s ease,left .28s ease,width .28s ease,height .28s ease;
}
.tour-spot::after{
  content:"";position:absolute;inset:-5px;border-radius:21px;
  border:1px solid rgba(184,220,196,.2);
  animation:tourHalo 2.4s ease-in-out infinite;
}

.tour-card{
  position:fixed;left:50%;bottom:24px;z-index:2;
  width:min(440px,calc(100vw - 28px));padding:18px 20px 16px;
  border:1px solid rgba(203,225,207,.2);border-radius:18px;
  background:linear-gradient(160deg,rgba(16,42,43,.98),rgba(6,19,22,.99));
  box-shadow:0 24px 80px rgba(0,0,0,.58),inset 0 1px 0 rgba(255,255,255,.06);
  color:var(--ink);pointer-events:auto;outline:none;
  transform:translateX(-50%);
  animation:tourCardIn .32s cubic-bezier(.16,1,.3,1);
}
.tour-card.is-top{
  top:24px;bottom:auto;
  animation-name:tourCardInTop;
}
.tour-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.tour-kicker{font-size:11px;letter-spacing:.12em;color:var(--faint);white-space:nowrap}
.tour-skip{
  border:0;background:transparent;color:var(--faint);font-size:12px;letter-spacing:.05em;
  padding:4px 2px;cursor:pointer;transition:.18s ease;
}
.tour-skip:hover{color:var(--ink)}
.tour-title-row{display:flex;align-items:center;gap:10px}
.tour-glyph{
  width:36px;height:36px;flex:none;display:grid;place-items:center;border-radius:50%;
  border:1px solid rgba(184,220,196,.2);background:rgba(184,220,196,.08);
  color:var(--sage);font-family:var(--serif);font-size:19px;line-height:1;
  box-shadow:0 0 18px rgba(184,220,196,.08);
}
.tour-title-row h3{
  margin:0;font-family:var(--serif);font-size:23px;font-weight:500;
  letter-spacing:.06em;color:#f1f1df;line-height:1.3;
}
.tour-text{
  margin:9px 0 0;font-size:13.5px;line-height:1.85;color:var(--muted);
  letter-spacing:.015em;
}
.tour-extra{
  margin-top:12px;padding:8px 11px;border:1px solid var(--line);border-radius:9px;
  background:rgba(184,220,196,.055);color:var(--sage2);
  font-size:12px;line-height:1.6;letter-spacing:.02em;
}
.tour-extra.gold{
  border-color:rgba(230,201,146,.24);background:rgba(230,201,146,.08);color:var(--gold);
}
.tour-actions{display:flex;gap:8px;margin-top:16px}
.tour-actions button{
  flex:1;padding:10px 12px;border:1px solid var(--line);border-radius:9px;
  background:rgba(255,255,255,.025);color:var(--muted);font-size:13px;
  letter-spacing:.05em;cursor:pointer;transition:.18s ease;
}
.tour-actions button:hover:not(:disabled){border-color:var(--line2);color:var(--ink)}
.tour-actions #tourBack{flex:0 0 88px}
.tour-actions #tourNext{
  color:var(--sage2);border-color:rgba(184,220,196,.26);
  background:linear-gradient(110deg,rgba(184,220,196,.14),rgba(184,220,196,.06));
}
.tour-actions #tourNext:hover:not(:disabled){background:rgba(184,220,196,.2)}
.tour-actions #tourNext:disabled{
  opacity:.38;cursor:not-allowed;color:var(--faint);border-color:var(--line);
  background:rgba(255,255,255,.02);
}
.tour-actions #tourNext.ready{box-shadow:0 0 22px rgba(184,220,196,.1)}
.tour-actions #tourNext.nudge{animation:tourNudge .34s ease}

@keyframes tourCardIn{
  from{opacity:0;transform:translate(-50%,14px)}
  to{opacity:1;transform:translate(-50%,0)}
}
@keyframes tourCardInTop{
  from{opacity:0;transform:translate(-50%,-14px)}
  to{opacity:1;transform:translate(-50%,0)}
}
@keyframes tourHalo{
  0%,100%{opacity:.3;transform:scale(1)}
  50%{opacity:.75;transform:scale(1.012)}
}
@keyframes tourNudge{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-5px)}
  60%{transform:translateX(5px)}
  85%{transform:translateX(-2px)}
}

@media (max-width:640px){
  body.tour-open .toast-stack{top:70px}
  body.tour-open.tour-card-top .toast-stack{top:auto;bottom:14px}
  .tour-card{
    bottom:12px;width:calc(100vw - 20px);padding:15px 16px 14px;
    max-height:50vh;overflow-y:auto;border-radius:16px;
  }
  .tour-card.is-top{top:12px}
  .tour-title-row h3{font-size:20px}
  .tour-text{font-size:13px;line-height:1.8}
  .tour-actions #tourBack{flex-basis:78px}
  .tour-kicker{font-size:10.5px}
}

@media (prefers-reduced-motion:reduce){
  .tour-spot{transition:none}
  .tour-spot::after{animation:none}
  .tour-card,.tour-card.is-top{animation:none}
  .tour-actions #tourNext.nudge{animation:none}
}