/* 新手教程：开局选择 / 训练场任务卡 / HUD 按钮高亮 / 玩法图鉴 */

/* ---------- 开局选择 ---------- */
.tut-choice { position: fixed; inset: 0; z-index: 75; display: flex; align-items: center; justify-content: center; padding: calc(16px + var(--safe-t)) 16px calc(16px + var(--safe-b));
  background: radial-gradient(ellipse at 50% 35%, rgba(60,40,120,.6), rgba(6,3,14,.2) 70%), var(--px-stars, none), rgba(8,5,18,.9); animation: fade .4s; overflow-y: auto; }
.tut-choice.out { animation: fadeOut .38s forwards; }
.tc-box { width: min(920px, 100%); display: flex; flex-direction: column; gap: 18px; margin: auto; }
.tc-head { text-align: center; }
.tc-k { color: var(--violet); letter-spacing: .3em; font-size: 13px; }
.tc-head h1 { margin: 6px 0 4px; font-size: clamp(30px, 6vw, 48px); font-weight: normal; letter-spacing: .25em;
  background: linear-gradient(180deg, #ffffff 0 40%, #fff2b0 40% 62%, #ffd84a 62% 82%, #e0a020 82%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 3px 0 var(--ink)) drop-shadow(0 0 20px rgba(255,216,74,.4)); }
.tc-head p { margin: 0; color: #d8ccff; font-size: 15px; }
.tc-cards { display: grid; grid-template-columns: 1.35fr 1fr; gap: 16px; }
.tc-card { position: relative; display: flex; gap: 14px; padding: 18px; cursor: pointer; transition: transform .15s, box-shadow .15s;
  background: linear-gradient(160deg, rgba(44,32,90,.95), rgba(18,12,38,.95)); box-shadow: 0 0 0 2px var(--ink), inset 0 0 0 2px var(--line2), 0 16px 40px rgba(0,0,0,.45); clip-path: var(--notch4); }
.tc-card:hover { transform: translateY(-3px); }
.tc-card.main { box-shadow: 0 0 0 2px var(--ink), inset 0 0 0 2px #e0a020, inset 0 0 0 4px rgba(255,216,74,.18), 0 0 40px rgba(255,216,74,.18), 0 16px 40px rgba(0,0,0,.45); animation: tcGlow 3s ease-in-out infinite; }
@keyframes tcGlow { 50% { box-shadow: 0 0 0 2px var(--ink), inset 0 0 0 2px #ffe680, inset 0 0 0 4px rgba(255,216,74,.3), 0 0 56px rgba(255,216,74,.3), 0 16px 40px rgba(0,0,0,.45); } }
.tc-por { flex: none; width: 112px; display: flex; align-items: flex-end; justify-content: center; background: radial-gradient(ellipse at 50% 80%, rgba(255,216,74,.25), transparent 70%); }
.tc-por img { width: 112px; image-rendering: pixelated; filter: drop-shadow(0 4px 0 rgba(0,0,0,.4)); }
.tc-por.ic { width: 72px; align-items: center; background: none; }
.tc-por.ic img { width: 64px; }
.tc-tx { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tc-tx b { font-weight: normal; font-size: 22px; color: var(--gold); text-shadow: 0 2px 0 #000; letter-spacing: .08em; }
.tc-card.skip .tc-tx b { color: #e6dcff; }
.tc-tag { align-self: flex-start; font-size: 12px; padding: 1px 8px; color: #2a1a00; background: var(--gold); }
.tc-tag.dim { color: var(--muted); background: rgba(255,255,255,.08); }
.tc-tx p { margin: 2px 0; font-size: 13.5px; line-height: 1.7; color: #d8d0f0; }
.tc-rwl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tc-rwl small { color: var(--muted); }
.tc-rw { display: flex; gap: 10px; flex-wrap: wrap; }
.tc-rw span { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; color: #fff3c0; }
.tc-rw img { width: 24px; height: 24px; image-rendering: pixelated; }
.tc-go { margin-top: 6px; align-self: flex-start; --c: #e0a020; --hi: #ffe680; --lo: #a86a10; color: #2a1a00; text-shadow: 0 1px 0 rgba(255,255,255,.45); min-width: 180px; }
.tc-skip { margin-top: auto; align-self: flex-start; }
.tc-foot { text-align: center; font-size: 12px; }
@media (max-width: 760px) {
  .tc-cards { grid-template-columns: 1fr; gap: 12px; }
  .tc-card { padding: 14px; gap: 10px; }
  .tc-por { width: 76px; } .tc-por img { width: 76px; } .tc-por.ic { width: 56px; } .tc-por.ic img { width: 48px; }
  .tc-tx b { font-size: 19px; } .tc-tx p { font-size: 13px; line-height: 1.6; }
  .tc-go { align-self: stretch; } .tc-skip { align-self: stretch; }
  .tc-head p { font-size: 13.5px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .tc-box { gap: 10px; } .tc-head h1 { font-size: 28px; margin: 2px 0; } .tc-cards { grid-template-columns: 1.35fr 1fr; }
  .tc-tx p { font-size: 12px; line-height: 1.5; } .tc-por { width: 72px; } .tc-por img { width: 72px; }
}

/* ---------- 训练场：隐藏无关 HUD ---------- */
body.tut-on #hud .hud-quest, body.tut-on:not(.tut-menu) #hud .hud-menu, body.tut-on #hud .hud-chat, body.tut-on #hud .hud-navslot { display: none !important; }

/* ---------- 任务卡 ---------- */
.tut-card { position: fixed; left: 50%; top: calc(12px + var(--safe-t)); z-index: 26; width: min(580px, calc(100vw - 560px)); min-width: 420px; display: flex; gap: 12px; padding: 10px 12px 10px 10px;
  transform: translate(-50%, -14px); opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s;
  background: linear-gradient(180deg, rgba(40,30,80,.94), rgba(16,11,32,.94)); box-shadow: 0 0 0 2px var(--ink), inset 0 0 0 2px #6a52b8, inset 3px 0 0 2px var(--gold), 0 10px 30px rgba(0,0,0,.45); }
.tut-card.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.tut-card.on.hide { opacity: 0; pointer-events: none; }
.tut-card.done { box-shadow: 0 0 0 2px var(--ink), inset 0 0 0 2px var(--green), inset 3px 0 0 2px var(--green), 0 0 26px rgba(125,255,138,.25); }
.tk-por { flex: none; width: 52px; display: flex; align-items: flex-end; justify-content: center; background: radial-gradient(ellipse at 50% 85%, rgba(255,216,74,.22), transparent 70%); }
.tk-por img { width: 52px; image-rendering: pixelated; }
.tk-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.tk-top { display: flex; align-items: center; gap: 8px; }
.tk-n { font-size: 11px; color: #2a1a00; background: var(--gold); padding: 0 6px; letter-spacing: .05em; }
.tut-card.done .tk-n { background: var(--green); }
.tk-t { flex: 1; font-weight: normal; font-size: 17px; color: var(--gold); text-shadow: 0 2px 0 #000; letter-spacing: .06em; }
.tut-card.done .tk-t::after { content: ' ✓'; color: var(--green); }
.tk-skip { flex: none; border: 0; cursor: pointer; font-size: 12px; padding: 3px 8px; color: var(--muted); background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.tk-skip:hover { color: #fff; background: rgba(255,90,106,.25); }
.tk-d { font-size: 13px; line-height: 1.7; color: var(--text); }
.tk-d b { font-weight: normal; color: var(--gold); }
.tk-d kbd, .tut-tour kbd { display: inline-block; min-width: 20px; margin: 0 2px; padding: 0 5px; font-family: var(--px); font-size: 12px; line-height: 19px; text-align: center; color: #fff;
  background: linear-gradient(180deg, #2e2558, #1a1430); box-shadow: inset 0 0 0 1px var(--line2), inset 0 -2px 0 rgba(0,0,0,.45); }
.tk-praise { color: #c8f0d0; }
.tk-p { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tk-p:empty { display: none; }
.tk-p .tp { font-size: 12px; padding: 1px 8px; color: var(--muted); background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.tk-p .tp.ok { color: #0e2a12; background: var(--green); box-shadow: none; }
.tk-p .tfb { font-size: 12px; animation: fade .2s; }
.tk-p .trx { display: inline-flex; gap: 8px; font-size: 12px; } .tk-p .trx i { font-style: normal; text-shadow: 0 1px 0 #000; }
.tk-acts { display: flex; justify-content: flex-end; gap: 6px; }
.tk-acts .btn[style*='none'] + .btn[style*='none'] { display: none; }
@media (max-width: 1100px) { .tut-card { width: min(520px, calc(100vw - 32px)); min-width: 0; } }
@media (max-width: 760px), (pointer: coarse) {
  .tut-card { top: calc(118px + var(--safe-t)); width: calc(100vw - 20px); padding: 8px 10px 8px 8px; gap: 8px; }
  .tk-por { width: 40px; } .tk-por img { width: 40px; }
  .tk-t { font-size: 15px; } .tk-d { font-size: 12.5px; line-height: 1.6; }
  .tk-skip { padding: 5px 10px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .tut-card { top: calc(6px + var(--safe-t)); width: min(400px, 46vw); }
  .tk-por { display: none; } .tk-d { font-size: 11.5px; line-height: 1.5; } .tk-t { font-size: 14px; }
}

/* ---------- HUD 按钮高亮 ---------- */
.tut-glow { animation: tutGlow 1.1s ease-in-out infinite !important; z-index: 3; }
@keyframes tutGlow { 0%, 100% { filter: drop-shadow(0 0 0 rgba(255,216,74,0)) brightness(1); } 50% { filter: drop-shadow(0 0 10px rgba(255,216,74,.95)) drop-shadow(0 0 3px #fff) brightness(1.25); } }

/* ---------- 玩法图鉴 ---------- */
.tut-tour { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: calc(12px + var(--safe-t)) 12px calc(12px + var(--safe-b));
  background: radial-gradient(ellipse at 50% 40%, rgba(40,26,80,.8), rgba(4,2,10,.94)); animation: fade .3s; }
.tut-tour.out { animation: fadeOut .3s forwards; }
.tt-box { width: min(900px, 100%); max-height: 100%; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px;
  background: linear-gradient(180deg, rgba(34,26,66,.97), rgba(14,10,30,.97)); box-shadow: 0 0 0 2px var(--ink), inset 0 0 0 2px var(--line2), 0 20px 60px rgba(0,0,0,.6); clip-path: var(--notch4); }
.tt-head { display: flex; justify-content: space-between; align-items: center; }
.tt-k { color: var(--violet); letter-spacing: .2em; font-size: 12px; }
.tt-x { border: 0; cursor: pointer; background: rgba(255,255,255,.06); color: var(--muted); padding: 4px 10px; font-size: 12px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.tt-x:hover { color: #fff; }
.tt-stage { position: relative; min-height: 0; flex: 1; overflow: hidden auto; }
.tt-slide { --sc: var(--gold); display: grid; grid-template-columns: 1.05fr 1fr; gap: 18px; align-items: center; }
.tt-slide.in-r { animation: ttInR .32s ease-out; } .tt-slide.in-l { animation: ttInL .32s ease-out; }
@keyframes ttInR { from { opacity: 0; transform: translateX(26px); } } @keyframes ttInL { from { opacity: 0; transform: translateX(-26px); } }
.tt-art { min-height: 260px; display: flex; align-items: center; justify-content: center; padding: 14px;
  background: radial-gradient(ellipse at 50% 60%, color-mix(in srgb, var(--sc) 22%, transparent), transparent 70%), rgba(8,5,18,.55); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sc) 35%, transparent); }
.tt-art img { image-rendering: pixelated; }
.tt-n { font-size: 12px; color: var(--dim); }
.tt-body h2 { margin: 4px 0 2px; font-weight: normal; font-size: 24px; color: var(--sc); text-shadow: 0 2px 0 #000; letter-spacing: .06em; }
.tt-sub { display: inline-block; font-size: 12px; padding: 1px 8px; color: #120a22; background: var(--sc); }
.tt-body ul { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.tt-body li { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; font-size: 13.5px; line-height: 1.65; color: #e0d8f8; }
.tt-body li img { width: 24px; height: 24px; image-rendering: pixelated; margin-top: 1px; }
.tt-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tt-dots { display: flex; gap: 6px; } .tt-dots i { width: 8px; height: 8px; background: rgba(255,255,255,.18); cursor: pointer; transform: rotate(45deg); transition: background .2s; }
.tt-dots i.on { background: var(--gold); box-shadow: 0 0 8px rgba(255,216,74,.7); }
/* 插画 */
.ta-bosses { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; width: 100%; }
.ta-boss { position: relative; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); overflow: hidden; }
.ta-boss img { width: 92%; }
.ta-boss i { position: absolute; right: 3px; top: 3px; width: 7px; height: 7px; background: var(--cc); transform: rotate(45deg); box-shadow: 0 0 8px var(--cc); }
.ta-heroes, .ta-col { display: flex; flex-direction: column; gap: 14px; align-items: center; }
.ta-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; align-items: flex-end; }
.ta-hero { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 6px; background: radial-gradient(ellipse at 50% 80%, color-mix(in srgb, var(--cc) 30%, transparent), transparent 70%); }
.ta-hero img { width: 64px; } .ta-hero small { font-size: 11px; color: var(--cc); }
.ta-row.els { gap: 6px 12px; } .ta-el { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; text-shadow: 0 1px 0 #000; } .ta-el img { width: 22px; height: 22px; }
.ta-gacha { display: flex; gap: 22px; align-items: center; } .ta-gacha > img { width: 96px; filter: drop-shadow(0 0 18px rgba(255,216,74,.5)); }
.ta-stars { display: flex; gap: 4px; } .ta-stars img { width: 30px; }
.ta-npcs { display: flex; gap: 6px; align-items: flex-end; flex-wrap: wrap; justify-content: center; }
.ta-npc { position: relative; display: flex; flex-direction: column; align-items: center; padding: 0 10px; }
.ta-npc img { width: 60px; } .ta-npc small { font-size: 11px; color: #ffe8b0; }
.ta-heart { position: absolute; right: -14px; top: 26px; animation: navNeedle 2.4s ease-in-out infinite; } .ta-heart img { width: 20px; }
.ta-story { display: flex; flex-direction: column; align-items: center; gap: 14px; } .ta-story > img { width: 80px; }
.ta-tls { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.ta-tl { font-size: 12px; padding: 2px 10px; color: #fff; background: color-mix(in srgb, var(--tc) 55%, #120a22); box-shadow: inset 0 0 0 1px var(--tc); }
.ta-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; }
.ta-cell { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.ta-cell img { width: 40px; } .ta-cell small { font-size: 12px; color: #d8d0f0; }
.ta-nav { display: flex; flex-direction: column; align-items: center; gap: 14px; } .ta-nav > img { width: 88px; animation: navNeedle 3.2s ease-in-out infinite; }
.ta-keys { display: flex; flex-wrap: wrap; gap: 6px 12px; justify-content: center; } .ta-key { font-size: 12px; color: #d8d0f0; display: inline-flex; align-items: center; gap: 4px; }
@media (max-width: 760px) {
  .tt-box { padding: 10px; }
  .tt-slide { grid-template-columns: 1fr; gap: 10px; }
  .tt-art { min-height: 0; padding: 10px; }
  .ta-bosses { grid-template-columns: repeat(6, 1fr); gap: 4px; }
  .ta-hero img { width: 44px; } .ta-npc img { width: 44px; } .ta-gacha > img { width: 64px; } .ta-cell img { width: 32px; } .ta-cell { padding: 6px 2px; }
  .tt-body h2 { font-size: 20px; } .tt-body li { font-size: 12.5px; line-height: 1.55; } .tt-body ul { gap: 7px; margin-top: 8px; }
  .tt-foot .btn { min-height: 38px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .tt-slide { grid-template-columns: 1fr 1.1fr; } .tt-art { min-height: 0; } .tt-body li { font-size: 12px; line-height: 1.45; } .tt-body ul { gap: 5px; margin-top: 6px; }
  .ta-hero img, .ta-npc img { width: 40px; } .ta-cell img { width: 28px; }
}