/* ============================================================
   技能展示（二级页 /skills/）
   页面骨架（变量 / 导航 / 页脚）在 skills.html 的内联 <style> 里，与 destiny.html 同一套；
   这里只放技能模块本身。布局刻意对齐命格图鉴（左舞台 + 右可滚动一览），
   让两个二级页看起来是同一家的。
   ============================================================ */

/* ===== 01 题款 ===== */
.sk-sub{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 22px;padding-bottom:14px;border-bottom:1px solid rgba(200,164,92,.28)}
.sk-sub-head{display:flex;align-items:baseline;gap:13px}
.sk-sub-title{font-family:var(--font-title);font-size:30px;font-weight:400;letter-spacing:.1em;color:#f2ead9;white-space:nowrap}
.sk-sub-title em{font-style:normal;color:var(--cinnabar-l);padding:0 2px}
.sk-sub-en{font-family:var(--font-title);font-size:11.5px;letter-spacing:.34em;color:rgba(200,164,92,.68);white-space:nowrap}
.sk-sub-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-left:auto}
.sk-sub-desc{font-size:12.5px;letter-spacing:.1em;color:#8fa79b}
.sk-sub-desc b{color:var(--gold-l);font-weight:400}
.sk-cross{font-family:var(--font-title);font-size:13px;letter-spacing:.12em;color:rgba(200,164,92,.82);
  padding:5px 12px;border:1px solid rgba(200,164,92,.3);transition:.3s;white-space:nowrap}
.sk-cross:hover{color:var(--gold-l);border-color:var(--gold);background:rgba(200,164,92,.1)}
.sk-search{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px;border:1px solid rgba(200,164,92,.32);background:rgba(6,16,18,.5);transition:.3s}
.sk-search:focus-within{border-color:var(--gold);box-shadow:0 0 0 3px rgba(200,164,92,.10)}
.sk-search .ic{width:15px;height:15px;color:rgba(200,164,92,.7);flex:none}
.sk-search input{width:150px;border:0;outline:0;background:none;font-size:13px;letter-spacing:.08em;color:#e7dfd0}
.sk-search input::placeholder{color:rgba(143,167,155,.7)}

/* ===== 02 分级 chips（沿用命格图鉴的样子） ===== */
.sk-chips{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 20px}
.sk-chip{display:inline-flex;align-items:center;gap:9px;padding:9px 16px;border:1px solid rgba(200,164,92,.3);
  background:rgba(6,16,18,.44);font-family:var(--font-title);font-size:14.5px;letter-spacing:.12em;color:#c9bfa8;transition:.28s;white-space:nowrap}
.sk-chip:hover{border-color:var(--gold);color:var(--gold-l)}
.sk-chip[aria-pressed="true"]{border-color:var(--gold);background:rgba(200,164,92,.12);color:var(--gold-l);
  box-shadow:0 0 0 1px rgba(200,164,92,.2) inset}
.sk-chip i{width:9px;height:9px;border-radius:50%;flex:none;background:var(--gold);box-shadow:0 0 8px currentColor}
.sk-chip[data-cls="道士"] i{background:#4fb3ad}
.sk-chip[data-cls="战士"] i{background:#c0492f}
.sk-chip[data-cls="法师"] i{background:#8f7ad8}
.sk-chip b{font-weight:400;font-size:12.5px;color:rgba(201,191,168,.72)}
.sk-chip[aria-pressed="true"] b{color:rgba(224,196,137,.85)}

/* ===== 03 左舞台 + 右一览 ===== */
.sk-layout{display:grid;grid-template-columns:minmax(0,1fr) 512px;gap:30px;align-items:start}

.sk-stage-col{min-width:0}
.sk-stage{position:relative;aspect-ratio:16/9;border:1px solid rgba(200,164,92,.34);background:#081214;
  box-shadow:0 0 0 1px rgba(6,14,16,.9) inset,0 18px 42px rgba(0,0,0,.45);overflow:hidden}
.sk-stage::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(ellipse 74% 66% at 50% 48%,transparent 34%,rgba(4,10,12,.55) 100%)}
.sk-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:2}
.sk-blank{position:absolute;inset:0;z-index:2;display:grid;place-content:center;justify-items:center;gap:16px;text-align:center;padding:20px;
  background:
    radial-gradient(ellipse 44% 54% at 50% 48%,rgba(31,111,107,.20),transparent 72%),
    radial-gradient(ellipse 62% 40% at 50% 116%,rgba(200,164,92,.10),transparent 74%),
    repeating-linear-gradient(45deg,rgba(200,164,92,.05) 0 1px,transparent 1px 22px),
    repeating-linear-gradient(-45deg,rgba(200,164,92,.05) 0 1px,transparent 1px 22px)}
.sk-blank-icon{width:104px;height:104px;border:1px solid rgba(200,164,92,.3);padding:5px;
  background:rgba(6,16,18,.66);box-shadow:0 0 34px rgba(200,164,92,.16),0 0 0 6px rgba(6,16,18,.35)}
.sk-blank-text{font-size:12.5px;letter-spacing:.18em;color:#8ba39a}
.sk-stage-badge{position:absolute;left:0;top:0;z-index:3;padding:5px 13px;font-family:var(--font-title);font-size:11.5px;
  letter-spacing:.22em;color:#0d1a1b;background:linear-gradient(180deg,var(--gold-l),var(--gold))}
.sk-stage-badge.is-pending{background:linear-gradient(180deg,#5d6f6a,#42514d);color:#e7dfd0}

/* 舞台下方的技能名 */
.sk-meta{display:flex;align-items:center;gap:14px;margin-top:16px;padding-top:14px;border-top:1px solid rgba(200,164,92,.22)}
.sk-meta-icon{width:54px;height:54px;flex:none;border:1px solid rgba(200,164,92,.34);padding:3px;background:rgba(6,16,18,.6)}
.sk-meta-icon img{width:100%;height:100%;object-fit:contain}
.sk-meta-txt{min-width:0}
.sk-meta-name{display:block;font-family:var(--font-title);font-size:23px;font-weight:400;letter-spacing:.09em;color:#f4ecdb;line-height:1.3}
.sk-meta-tag{display:block;font-size:12px;letter-spacing:.14em;color:#8fa79b}
.sk-meta-src{margin-left:auto;font-size:11.5px;letter-spacing:.1em;color:rgba(143,167,155,.66);flex:none;text-align:right}
.sk-meta-desc{margin-top:10px;font-size:13px;line-height:1.9;letter-spacing:.06em;color:#93a79c;min-height:48px}
.sk-meta-desc em{font-style:normal;color:var(--gold-l)}

/* ===== 04 右：技能一览 ===== */
.sk-index{border:1px solid rgba(200,164,92,.3);background:rgba(6,16,18,.42);display:flex;flex-direction:column;min-width:0}
.sk-index-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:13px 16px;
  border-bottom:1px solid rgba(200,164,92,.22);flex:none}
.sk-index-title{font-family:var(--font-title);font-size:16.5px;letter-spacing:.16em;color:#e8dfc9}
.sk-index-count{font-size:12px;letter-spacing:.12em;color:#8fa79b;font-weight:400}
.sk-index-count b{color:var(--gold-l);font-weight:400}
.sk-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px;overflow-y:auto;max-height:520px;align-content:start}
.sk-grid::-webkit-scrollbar{width:8px}
.sk-grid::-webkit-scrollbar-track{background:rgba(200,164,92,.06)}
.sk-grid::-webkit-scrollbar-thumb{background:rgba(200,164,92,.3)}
.sk-grid::-webkit-scrollbar-thumb:hover{background:rgba(200,164,92,.5)}

.sk-item{display:flex;align-items:center;gap:10px;padding:7px 9px;border:1px solid rgba(200,164,92,.2);
  background:rgba(6,16,18,.42);text-align:left;transition:.26s;min-width:0}
.sk-item:hover{border-color:rgba(200,164,92,.6);background:rgba(200,164,92,.08)}
.sk-item:focus-visible{outline:1px solid var(--gold);outline-offset:2px}
.sk-item[aria-current="true"]{border-color:var(--gold);background:rgba(200,164,92,.14);
  box-shadow:0 0 0 1px rgba(200,164,92,.22) inset,0 0 18px rgba(200,164,92,.12)}
.sk-item-icon{width:40px;height:40px;flex:none;border:1px solid rgba(200,164,92,.24);padding:2px;background:rgba(4,10,12,.55)}
.sk-item-icon img{width:100%;height:100%;object-fit:contain}
.sk-item-body{min-width:0;flex:1}
.sk-item-name{display:block;font-family:var(--font-title);font-size:15px;letter-spacing:.06em;color:#e4dcc7;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.5}
.sk-item[aria-current="true"] .sk-item-name{color:var(--gold-l)}
.sk-item-sub{display:block;font-size:11px;letter-spacing:.1em;color:#7f948b;line-height:1.4}
.sk-item-mark{flex:none;width:8px;height:8px;border-radius:50%;background:#4a5f59}
.sk-item[data-has="1"] .sk-item-mark{background:var(--gold);box-shadow:0 0 8px rgba(200,164,92,.8)}
.sk-item[aria-current="true"][data-has="1"] .sk-item-mark{background:var(--cinnabar-l);box-shadow:0 0 10px rgba(201,73,61,.9)}
.sk-item[data-passive="1"] .sk-item-mark{background:#3d4d49;box-shadow:none}
.sk-empty{grid-column:1/-1;padding:26px 10px;text-align:center;font-size:13px;letter-spacing:.12em;color:#7f948b}

/* ===== 05 窄屏 ===== */
@media (max-width:1180px){
  .sk-layout{grid-template-columns:minmax(0,1fr) 440px}
  .sk-grid{grid-template-columns:1fr;max-height:440px}
}
@media (max-width:900px){
  .sk-layout{grid-template-columns:1fr}
  .sk-sub-row{margin-left:0;width:100%}
  .sk-search{flex:1}
  .sk-search input{width:100%}
  .sk-grid{grid-template-columns:1fr 1fr;max-height:none}
  .sk-stage-col{order:1}
  .sk-index{order:2}
  .sk-meta-name{font-size:20px}
}
@media (max-width:620px){
  .sk-sub-title{font-size:24px}
  .sk-sub-en{display:none}
  .sk-grid{grid-template-columns:1fr}
  .sk-blank-icon{width:76px;height:76px}
  .sk-meta-src{display:none}
  .sk-meta-desc{min-height:0}
}
@media (prefers-reduced-motion:reduce){
  .sk-chip,.sk-item,.sk-cross{transition-duration:.01ms}
}

/* 序列帧播放器，仅作用于技能页。 */
.sk-status-row{display:flex;gap:18px;align-items:center;flex-wrap:wrap;color:#8fa79b;font-size:12px;margin:-6px 0 18px}
.sk-status-row label,.sk-player label{display:inline-flex;gap:8px;align-items:center}
.sk-status-row select,.sk-player select{background:#102022;border:1px solid rgba(200,164,92,.35);color:#e0c489;padding:5px 8px;font:inherit;max-width:100%}
.sk-player{border:1px solid rgba(200,164,92,.26);border-top:0;padding:12px;background:rgba(6,16,18,.5);font-size:12px;color:#c9bfa8}
.sk-player-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px}
.sk-player button{padding:4px 10px;border:1px solid rgba(200,164,92,.35);color:#e0c489;font-size:12px}
.sk-player button:disabled,.sk-player input:disabled,.sk-player select:disabled{opacity:.4;cursor:default}
.sk-player [data-sk-play]{background:rgba(200,164,92,.15)}
.sk-player [data-sk-counter]{margin-left:auto;font-variant-numeric:tabular-nums}
.sk-player [data-sk-loaded]{margin-left:auto;color:#8fa79b}
.sk-timeline{width:100%;margin:12px 0;accent-color:#c8a45c;cursor:pointer}
.sk-meta-desc{white-space:pre-wrap}
.sk-match-note{font-size:11px;line-height:1.8;color:#8fa79b;margin-top:10px}
.sk-item[data-status="candidate"] .sk-item-mark{background:#9a875e;box-shadow:none}
@media(max-width:620px){.sk-player-row{gap:8px}.sk-player label{flex-wrap:wrap}.sk-status-row{gap:8px}}
/* 技能页布局：上方舞台与介绍并排，筛选与技能选择放在下方。 */
.sk-detail{border:1px solid rgba(200,164,92,.3);background:rgba(6,16,18,.42);padding:24px;min-height:420px;height:100%;display:flex;flex-direction:column}
.sk-detail-head{display:flex;align-items:center;gap:14px;min-width:0}
.sk-detail .sk-meta-icon{width:64px;height:64px}
.sk-detail-rule{height:1px;background:rgba(200,164,92,.22);margin:20px 0 18px}
.sk-detail-label{font-family:var(--font-title);font-size:13px;letter-spacing:.18em;color:var(--gold-l);margin:0 0 8px}
.sk-detail .sk-meta-desc{min-height:0;margin:0;color:#a6b5aa}
.sk-detail .sk-match-note{margin-top:auto;padding-top:24px;border-top:1px solid rgba(200,164,92,.16)}
.sk-selector{margin-top:34px}
.sk-selector .sk-chips{margin-top:0}
.sk-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;padding:14px;overflow:visible;max-height:none}
@media (max-width:1180px){.sk-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:900px){.sk-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:620px){.sk-detail{padding:18px;min-height:0;height:auto}.sk-grid{grid-template-columns:1fr}}

/* ===== 按需求精简的几处信息 =====
   元素保留在 DOM 里（skills.js 会往里写值，删掉会抛错），只是不显示；
   文案来源已在 skills.js 里断掉，这里再兜一层，数据变了也不会冒出来。
   注意「展示编号」那行的选择器要写到 .sk-player 这一层：
   上面有 `.sk-player label{display:inline-flex}`（0,1,1），
   只写 .sk-effect-field（0,1,0）压不住它，得用（0,2,0）。 */
.sk-sub-desc,
.sk-meta-src,
.sk-match-note,
.sk-player .sk-effect-field { display: none }

/* ===== hidden 属性必须真的隐藏 =====
   .sk-blank 自己写了 display:grid（作者样式优先级高于 UA 的 [hidden]{display:none}），
   所以 skills.js 里 blank.hidden = true 是个空操作：
   序列帧播起来以后，遮罩层（大图标 + 一直停在「加载序列帧…」的文案）仍然压在 .sk-frame 上面
   （两者都是 z-index:2，.sk-blank 在 DOM 里靠后），看起来就像「点了图标不播放」。
   这里兜一层，让模块内所有 [hidden] 都真的不显示。 */
.sk-mod [hidden] { display: none !important }