/* 剑网三 · 门派印象
   墨青为底，石青为主色，朱砂只用在印章上；每个门派的强调色取自其图标本身。 */

:root{
  --bg:#E9EAE4; --bg-2:#F4F4EF; --card:#F4F4EF; --card-edge:#D3D7CB;
  --fg:#101519; --fg-dim:#57646C; --fg-faint:#8A959B; --line:#C9CDC2;
  --azurite:#26707E; --azurite-lit:#3E97A8; --cinnabar:#B23A2E; --gold:#9C7C36;
  --power-nei:#3E7C8E; --power-wai:#9A6B34;
  --shadow:0 1px 2px rgba(16,21,25,.06), 0 8px 24px -12px rgba(16,21,25,.22);
  --serif:"Songti SC","STSong","SimSun","Noto Serif CJK SC","Source Han Serif SC",Georgia,serif;
  --sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",system-ui,sans-serif;
  --mono:"SF Mono",Menlo,Consolas,"DejaVu Sans Mono",monospace;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0E1317; --bg-2:#141B21; --card:#171F26; --card-edge:#26323B;
    --fg:#E4E8E6; --fg-dim:#9AA7AE; --fg-faint:#6B7A83; --line:#2A363F;
    --azurite:#4FA8B8; --azurite-lit:#6FC6D4; --cinnabar:#C9584A; --gold:#C2A15E;
    --power-nei:#6FB2C6; --power-wai:#C39B62;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -14px rgba(0,0,0,.7);
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--sans); font-size:15px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;                       /* 兜底：任何情况下都不横向滚动 */
}
/* 长标签不该把卡片撑破 */
.tag span:first-child, .names h2, .names .school{overflow-wrap:anywhere}
.wrap{max-width:1180px; margin:0 auto; padding:0 24px}

/* ---------- 页头 ---------- */
header{
  position:relative; overflow:hidden; border-bottom:1px solid var(--line);
  background:
    radial-gradient(120% 140% at 82% -20%, color-mix(in srgb, var(--azurite) 18%, transparent), transparent 60%),
    var(--bg-2);
}
.hd{display:flex; gap:28px; align-items:flex-end; justify-content:space-between; padding:52px 0 30px; flex-wrap:wrap}
.brand .en{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--fg-faint); margin:0 0 10px; white-space:nowrap;
}
.brand h1{
  font-family:var(--serif); font-weight:600; margin:0;
  font-size:clamp(34px,5vw,52px); letter-spacing:.14em; line-height:1.1; text-wrap:balance;
}
.brand p{margin:12px 0 0; color:var(--fg-dim); max-width:46ch}
.seal{
  flex:none; width:88px; height:88px; border-radius:6px;
  border:2.5px solid var(--cinnabar); color:var(--cinnabar);
  display:grid; place-content:center; text-align:center;
  font-family:var(--serif); font-size:21px; line-height:1.05; letter-spacing:.06em;
  transform:rotate(-5deg); opacity:.88;
}
.seal span{display:block}

.stats{display:flex; gap:30px; padding:16px 0 0; flex-wrap:wrap; align-items:flex-start}
.stat .n{font-family:var(--mono); font-size:23px; font-variant-numeric:tabular-nums}
.stat .k{font-size:11px; letter-spacing:.2em; color:var(--fg-faint); text-transform:uppercase; font-family:var(--mono)}

/* 实时状态灯 */
.live{display:flex; align-items:center; gap:7px; margin-left:auto; align-self:center; color:var(--fg-faint); font-size:12px}
.live .dot{width:7px; height:7px; border-radius:50%; background:var(--azurite-lit); box-shadow:0 0 0 0 var(--azurite-lit); animation:pulse 2.4s ease-out infinite}
.live.off .dot{background:var(--fg-faint); animation:none}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--azurite-lit) 60%,transparent)}
  70%{box-shadow:0 0 0 7px transparent}
  100%{box-shadow:0 0 0 0 transparent}
}

/* ---------- 工具条：只留搜索 ---------- */
.bar{
  position:sticky; top:0; z-index:20; border-bottom:1px solid var(--line);
  background:color-mix(in srgb,var(--bg) 88%,transparent); backdrop-filter:blur(10px);
}
.bar-in{display:flex; padding:12px 0}
.search{
  flex:1; display:flex; align-items:center; gap:8px;
  background:var(--card); border:1px solid var(--card-edge); border-radius:3px; padding:7px 11px;
}
.search input{border:0; background:0; color:var(--fg); font:inherit; width:100%; outline:none}
.search svg{flex:none; color:var(--fg-faint)}

/* ---------- 卡片栅格 ---------- */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:18px; padding:26px 0 70px}
.card{
  background:var(--card); border:1px solid var(--card-edge); border-radius:4px;
  padding:18px; display:flex; flex-direction:column; gap:14px;
  box-shadow:var(--shadow); position:relative; overflow:hidden;
  transition:transform .22s cubic-bezier(.2,.7,.3,1), border-color .22s;
}
.card::before{content:""; position:absolute; inset:0 auto 0 0; width:2px; background:var(--rc); opacity:.85}
.card:hover{transform:translateY(-3px); border-color:var(--rc)}
.card-top{display:flex; gap:14px; align-items:center}
.med{
  flex:none; width:62px; height:62px; border-radius:50%; position:relative;
  box-shadow:0 0 0 1px var(--card-edge), 0 2px 10px -3px rgba(0,0,0,.35);
}
.med img{width:100%; height:100%; border-radius:50%; display:block; object-fit:cover}
.med::after{
  content:""; position:absolute; inset:-5px; border-radius:50%;
  border:1px solid var(--rc); opacity:.35;
  transition:transform .5s cubic-bezier(.2,.7,.3,1), opacity .3s;
}
.card:hover .med::after{transform:scale(1.1); opacity:.85}
/* 门派在上作辅助，心法是鸡场里真正的称呼，占主位 */
.names{min-width:0; flex:1}
.names .school{font-size:11.5px; color:var(--fg-faint); letter-spacing:.18em; line-height:1.3}
.names h2{
  font-family:var(--serif); font-size:21px; font-weight:600; margin:1px 0 0;
  letter-spacing:.08em; line-height:1.25;
  display:flex; align-items:baseline; gap:7px; flex-wrap:wrap;
}
.alias{
  font-family:var(--sans); font-size:10.5px; font-weight:400; letter-spacing:.08em;
  color:var(--fg-faint); border:1px solid var(--line); border-radius:2px; padding:1px 5px;
}
/* 内功 / 外功各给一点底色，近战远程写在文字里 */
.kind{
  display:inline-block; margin-top:5px; font-size:11px; letter-spacing:.1em;
  padding:2px 7px; border-radius:2px; color:var(--fg-dim);
  background:color-mix(in srgb, var(--kind, var(--fg-faint)) 15%, transparent);
  border:1px solid color-mix(in srgb, var(--kind, var(--fg-faint)) 35%, transparent);
}
.kind[data-power="内功"]{--kind:var(--power-nei)}
.kind[data-power="外功"]{--kind:var(--power-wai)}
.count-badge{
  font-family:var(--mono); font-size:11px; font-variant-numeric:tabular-nums;
  color:var(--rc); border:1px solid var(--rc); border-radius:2px; padding:2px 7px;
  flex:none; align-self:flex-start;
}

/* ---------- 标签 ----------
   短词走标签云，长句独占一行（见 .quotes）——长句挤进云里会把卡片撑破。 */
.tags{display:flex; flex-direction:column; gap:10px; min-height:30px}
.cloud{display:flex; flex-wrap:wrap; gap:6px; align-content:flex-start}
.tag{
  font:inherit; cursor:pointer; border-radius:2px; padding:3px 9px;
  border:1px solid var(--card-edge); background:var(--bg); color:var(--fg-dim);
  display:inline-flex; align-items:baseline; gap:6px; line-height:1.5;
  max-width:100%;                          /* 再长也不许超出卡片 */
  transition:border-color .15s, color .15s, transform .12s, background .3s;
}
.tag:hover{transform:translateY(-1px); border-color:var(--rc); color:var(--fg)}
.tag .c{font-family:var(--mono); font-size:11px; font-variant-numeric:tabular-nums; color:var(--fg-faint)}
.tag[data-heat="1"]{font-size:13px}
.tag[data-heat="2"]{font-size:14px; color:var(--fg)}
.tag[data-heat="3"]{
  font-size:15px; color:var(--fg); border-color:var(--gold);
  background:color-mix(in srgb,var(--gold) 12%,var(--bg));
}
.tag[data-heat="3"] .c{color:var(--gold)}
/* 我附议过的：左侧一道主色实边 */
.tag.voted{border-color:var(--rc); box-shadow:inset 2px 0 0 var(--rc); color:var(--fg)}
/* 别人刚改动的：闪一下，让实时同步看得见 */
.tag.bump{animation:bump .9s ease-out}
@keyframes bump{
  0%{background:color-mix(in srgb,var(--rc) 38%,var(--bg)); transform:scale(1.06)}
  100%{background:var(--bg); transform:scale(1)}
}
/* 一句话：整行排布，左侧一道引文竖线，票数靠右对齐 */
.quotes{display:flex; flex-direction:column; gap:5px}
.quote{
  font:inherit; font-size:13px; cursor:pointer; text-align:left; width:100%;
  display:flex; align-items:flex-start; gap:10px; line-height:1.55;
  padding:5px 9px 5px 10px; border:0; border-left:2px solid var(--card-edge);
  border-radius:0 2px 2px 0; background:var(--bg); color:var(--fg-dim);
  transition:border-color .15s, color .15s, background .3s;
}
.quote .t{flex:1; min-width:0; overflow-wrap:anywhere}
.quote .c{
  font-family:var(--mono); font-size:11px; font-variant-numeric:tabular-nums;
  color:var(--fg-faint); flex:none; padding-top:2px;
}
.quote:hover{border-left-color:var(--rc); color:var(--fg)}
.quote[data-heat="2"]{color:var(--fg)}
.quote[data-heat="3"]{
  color:var(--fg); border-left-color:var(--gold);
  background:color-mix(in srgb,var(--gold) 9%,var(--bg));
}
.quote[data-heat="3"] .c{color:var(--gold)}
.quote.voted{border-left-color:var(--rc); border-left-width:3px; padding-left:9px; color:var(--fg)}
.quote.bump{animation:bump .9s ease-out}

.empty{color:var(--fg-faint); font-size:13px; font-style:italic}

/* 输入框字数提示：只在快写满时出现 */
.cnt{
  align-self:center; font-family:var(--mono); font-size:11px; font-variant-numeric:tabular-nums;
  color:var(--fg-faint); flex:none; min-width:0;
}
.cnt.full{color:var(--cinnabar)}

.add{display:flex; gap:6px; border-top:1px dashed var(--line); padding-top:12px; margin-top:auto}
.add input{
  flex:1; min-width:0; font:inherit; font-size:13px; padding:6px 9px; border-radius:2px;
  border:1px solid var(--card-edge); background:var(--bg); color:var(--fg); outline:none;
}
.add input:focus{border-color:var(--rc)}
.add button{
  font:inherit; font-size:13px; cursor:pointer; padding:6px 12px; border-radius:2px;
  border:1px solid var(--rc); background:transparent; color:var(--rc); white-space:nowrap;
}
.add button:hover{background:var(--rc); color:#fff}

:is(.tag,.add button,.add input,.search input):focus-visible{outline:2px solid var(--azurite-lit); outline-offset:2px}

.none{padding:60px 0; text-align:center; color:var(--fg-faint); font-family:var(--serif); font-size:18px}
footer{border-top:1px solid var(--line); padding:22px 0 40px; color:var(--fg-faint); font-size:12.5px}

.toast{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%,12px);
  background:var(--fg); color:var(--bg); padding:9px 18px; border-radius:3px; font-size:13.5px;
  opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:50;
}
.toast.on{opacity:1; transform:translate(-50%,0)}
.toast.err{background:var(--cinnabar); color:#fff}

@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}

/* ---------- 触屏 ---------- */
/* 手指点不准 1px 的边，触屏设备上把可点区域整体放大；hover 效果在触屏上
   会「粘」住，一并去掉。 */
@media (pointer:coarse){
  .tag{padding:7px 12px; gap:7px}
  .tag[data-heat="1"]{font-size:14px}
  .tag[data-heat="2"]{font-size:15px}
  .tag[data-heat="3"]{font-size:16px}
  .add button{padding:10px 16px}
  .add input{padding:10px 11px}
  .card:hover{transform:none}
  .tag:hover{transform:none}
}

/* ---------- 手机 ---------- */
@media (max-width:640px){
  .wrap{padding:0 16px}
  .hd{padding:30px 0 20px; gap:16px; align-items:flex-start}
  .brand h1{font-size:clamp(28px,9vw,38px); letter-spacing:.1em}
  .brand p{font-size:14px; margin-top:10px}
  .brand .en{font-size:9.5px; letter-spacing:.2em}
  .seal{width:58px; height:58px; font-size:14px; border-width:2px}

  /* 四项统计在窄屏挤成两行，改成横向可滑，省一行高度 */
  .stats{gap:0; padding:14px 0 2px; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none}
  .stats::-webkit-scrollbar{display:none}
  .stat{flex:none; min-width:74px}
  .stat .n{font-size:19px}
  .live{margin-left:0; flex:none; padding-left:10px}

  .grid{grid-template-columns:1fr; gap:12px; padding:18px 0 40px}
  .card{padding:15px; gap:12px}
  .med{width:54px; height:54px}
  .names h2{font-size:19px}

  /* iOS 会在 font-size < 16px 的输入框聚焦时自动放大整个页面 */
  .search input, .add input{font-size:16px}
  .add{flex-wrap:wrap}
}

/* 刘海屏：横向留出安全区，底部给 toast 让位 */
@supports (padding:max(0px)){
  .wrap{
    padding-left:max(16px, env(safe-area-inset-left));
    padding-right:max(16px, env(safe-area-inset-right));
  }
  @media (min-width:641px){
    .wrap{
      padding-left:max(24px, env(safe-area-inset-left));
      padding-right:max(24px, env(safe-area-inset-right));
    }
  }
  .toast{bottom:max(26px, calc(env(safe-area-inset-bottom) + 16px))}
}