/* 红尘万道 —— 水墨红尘风（手机优先） */
:root{
  --bg:#0f0d12; --bg2:#17141b; --card:#1d1922; --line:#2c2632;
  --ink:#e9e3dc; --dim:#9b9188; --gold:#d8b26a; --red:#c74b52; --jade:#6fbf9b;
  --love:#e0679b; --solo:#7fa8e8;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{margin:0;background:radial-gradient(1200px 600px at 50% -10%,#241d29 0%,var(--bg) 60%);color:var(--ink);
  font:15px/1.65 -apple-system,"PingFang SC","Microsoft YaHei",sans-serif;padding-bottom:76px}
.hide{display:none!important}
b{font-weight:600}
.red{color:var(--red)}
.dim{color:var(--dim)}
.small{font-size:13px}
.gold{color:var(--gold)}
.green{color:var(--jade)}

#topbar{position:sticky;top:0;z-index:20;background:linear-gradient(180deg,#1a1620ee,#1a1620cc);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);padding:6px 10px 7px}
.tb-row1{display:flex;align-items:center;gap:8px;font-size:14px}
.tb-name{color:var(--gold);font-weight:600}
.tb-realm{color:var(--ink);background:#2a2331;border:1px solid var(--line);border-radius:20px;padding:1px 8px;font-size:12px}
.tb-round{margin-left:auto;color:var(--dim);font-size:12px}
.tb-icons{display:flex;gap:10px;font-size:16px}
.badge{background:var(--red);color:#fff;border-radius:9px;font-size:10px;padding:0 5px;margin-left:2px;vertical-align:top}
.tb-row2{display:flex;gap:10px;font-size:12px;color:var(--dim);margin-top:4px;flex-wrap:wrap}
.tb-row2 b{color:var(--ink)}

#view{padding:10px 10px 20px;max-width:760px;margin:0 auto}
.card{background:linear-gradient(180deg,var(--card),#191521);border:1px solid var(--line);border-radius:14px;padding:12px;margin-bottom:12px}
.card h3{margin:0 0 8px;font-size:16px;display:flex;align-items:center;gap:6px}
.card h3 .r{margin-left:auto;font-size:12px;color:var(--dim);font-weight:400}
.card h4{margin:0 0 6px;font-size:14px}
.hr{height:1px;background:var(--line);margin:10px 0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.kv{display:flex;justify-content:space-between;font-size:13px;padding:3px 0;border-bottom:1px dashed #241f2b}
.kv span{color:var(--dim)}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}

/* ===== 按钮 / 标签：提高对比度，字要看得清 ===== */
.btn{background:#322a3d;color:#f4efe9;border:1px solid #4a4157;border-radius:10px;padding:9px 12px;font-size:14px;font-weight:600;
  cursor:pointer;box-shadow:inset 0 1px 0 #ffffff12}
.btn:active{transform:translateY(1px)}
.btn.main{background:linear-gradient(135deg,#a63a52,#e05a60);border-color:#c9575f;color:#fff;text-shadow:0 1px 1px #00000055}
.btn.gold{background:linear-gradient(135deg,#b58a3c,#eccd85);border-color:#c9a253;color:#2a2113;text-shadow:none}
.btn.ghost{background:#2a2432;color:#cfc6bb;border-color:#4a4157}
.btn.small{padding:7px 11px;font-size:13px}
.btn:disabled{opacity:.62;color:#a79e94;cursor:not-allowed}
.tag{font-size:11px;border:1px solid #463e52;border-radius:8px;padding:1px 7px;color:#c8bfb4;background:#2a2432;white-space:nowrap}
.tag.gold{border-color:#7a5f2c;color:#f0d79b;background:#342a1b}
.tag.red{border-color:#7d333c;color:#f0959c;background:#33202a}
.pill{background:#322a3d;color:#f0eae3;border:1px solid #4a4157;border-radius:10px;padding:7px 11px;font-size:13px;font-weight:600;cursor:pointer}
.pill.on{border-color:var(--gold);color:#f6dfa8;background:#3a3227}
.opt{background:#2e2739;border-color:#514767;color:#f4efe9;font-weight:600}
.bar{height:6px;border-radius:4px;background:#2a2331;overflow:hidden}
.bar>i{display:block;height:100%;background:linear-gradient(90deg,#8e2f45,#d8b26a)}
.empty{color:var(--dim);font-size:13px;text-align:center;padding:18px 0}

#tabs{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:repeat(5,1fr);
  background:linear-gradient(180deg,#181420ee,#100d16f2);border-top:1px solid var(--line);padding:6px 4px 8px}
#tabs button{background:none;border:0;color:var(--dim);font-size:11px;padding:6px 2px;cursor:pointer;line-height:1.25}
#tabs button.on{color:var(--gold)}
#tabs button.on::after{content:'';display:block;height:2px;width:22px;margin:4px auto 0;background:var(--gold);border-radius:2px}

#modal{position:fixed;inset:0;background:#07060ac9;z-index:60;display:flex;align-items:flex-end;justify-content:center;padding:16px}
#modalBox{background:var(--bg2);border:1px solid var(--line);border-radius:16px;padding:14px;width:100%;max-width:560px;max-height:82vh;overflow:auto}
#strong{position:fixed;inset:0;background:#070609f2;z-index:90;display:flex;align-items:center;justify-content:center;padding:14px}
#strongBox{background:linear-gradient(180deg,#221b26,#171320);border:1px solid #6a3a48;border-radius:16px;padding:16px;width:100%;max-width:560px;
  max-height:88vh;overflow:auto;box-shadow:0 0 40px #c74b5233}
#strongBox h3{color:var(--red);margin:0 0 8px;font-size:17px}
#strongBox .body{white-space:pre-wrap;margin-bottom:10px}
.opt{display:block;width:100%;text-align:left;margin-top:8px}
#toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%);z-index:120;display:flex;flex-direction:column;gap:6px;align-items:center;pointer-events:none}
#toast div{background:#2a2331ee;border:1px solid var(--line);color:var(--ink);border-radius:10px;padding:8px 12px;font-size:13px;max-width:88vw}

.auth{max-width:420px;margin:6vh auto;padding:0 14px}
.auth h1{font-size:26px;margin:0 0 4px;color:var(--gold);letter-spacing:2px}
.auth .sub{color:var(--dim);font-size:13px;margin-bottom:16px}
input,select,textarea{width:100%;background:#161320;border:1px solid var(--line);color:var(--ink);border-radius:10px;padding:10px;font-size:14px;margin-top:8px}
.rankrow{display:flex;gap:8px;align-items:center;font-size:13px;padding:6px 0;border-bottom:1px solid #221d28}
.rankrow .no{width:22px;color:var(--gold)}
.rankrow .v{margin-left:auto;color:var(--gold)}
.npc{border:1px solid var(--line);border-radius:12px;padding:10px;margin-bottom:8px;background:#1b1723}
.npc .hd{display:flex;align-items:center;gap:6px;font-size:14px}
.npc .hd b{font-size:15px}
.npc .ft{margin-top:8px;display:flex;gap:6px;flex-wrap:wrap}
.f-male{color:#7fa8e8}.f-female{color:#e0679b}

/* ===== 大世界节点地图 ===== */
.mapwrap{position:relative;width:100%;height:300px;background:radial-gradient(600px 300px at 30% 10%,#221c2b,#16121d);
  border:1px solid var(--line);border-radius:12px;overflow:hidden}
.maplines{position:absolute;inset:0;width:100%;height:100%}
.maplines line{stroke:#4a3f56;stroke-width:.7;stroke-dasharray:2 2}
.mnode{position:absolute;transform:translate(-50%,-50%);cursor:pointer;z-index:2;text-align:center}
.mnode .nbox{background:#1e1926;border:1px solid var(--line);border-radius:9px;padding:3px 7px;display:inline-block;white-space:nowrap}
.mnode .nm{font-size:12px;color:var(--ink)}
.mnode .badges{display:block;font-size:9px;line-height:1.2;margin-top:1px}
.mnode .badges i{font-style:normal;margin:0 2px;color:var(--dim)}
.mnode .badges .bn{color:var(--jade)}
.mnode .badges .bo{color:var(--love)}
.mnode .badges .bg{color:var(--gold)}
.mnode.adj .nbox{border-color:var(--gold);border-style:dashed}
.mnode.me .nbox{border-color:var(--jade);box-shadow:0 0 0 2px #6fbf9b44,0 0 16px #6fbf9b33;background:#1b2620}
.mnode .here{font-size:10px;color:var(--jade);margin-top:1px}
.mnode.city .nbox{border-color:#a88338;background:#2b2418}
.mnode.city .nm{color:#f2dca6;font-weight:600}

/* ---------- 双修 · 暧昧动画 ---------- */
.dualcover{position:fixed;inset:0;z-index:110;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 58%,#4a2233 0,#1b0e15 64%,#0d0609 100%);opacity:0;animation:dualin .5s ease forwards}
.dualcover.out{transition:opacity .55s ease;opacity:0}
@keyframes dualin{from{opacity:0}to{opacity:1}}
.dualscene{position:relative;width:260px;height:230px}
.dualscene .glow{position:absolute;left:50%;top:56%;width:180px;height:180px;margin:-90px 0 0 -90px;border-radius:50%;background:radial-gradient(circle,#ff9ecb66 0,#ff6a9c22 55%,transparent 72%);animation:dualglow 2s ease-in-out infinite}
@keyframes dualglow{0%,100%{transform:scale(.9);opacity:.7}50%{transform:scale(1.16);opacity:1}}
.dualscene .veil{position:absolute;inset:-30px -70px;background:linear-gradient(90deg,transparent 0,#ffd6ea26 22%,#ffd6ea4d 50%,#ffd6ea26 78%,transparent 100%);filter:blur(3px);animation:veil 3.4s ease-in-out forwards}
@keyframes veil{0%{opacity:.15}55%{opacity:.5}100%{opacity:.95}}
.hearts i{position:absolute;bottom:40px;font-size:14px;opacity:0;animation:up 2.6s ease-in infinite;text-shadow:0 0 8px #ff9ecb88}
@keyframes up{0%{opacity:0;transform:translateY(0) scale(.6)}20%{opacity:1}100%{opacity:0;transform:translateY(-152px) scale(1.2) rotate(14deg)}}
.sil{position:absolute;bottom:34px;width:46px;height:106px;border-radius:24px 24px 12px 12px;transform-origin:bottom center;box-shadow:0 0 26px #00000066}
.sil i{position:absolute;top:-23px;left:50%;width:34px;height:34px;margin-left:-17px;border-radius:50%;background:inherit}
.sil span{position:absolute;bottom:-20px;left:50%;transform:translateX(-50%);font-size:11px;color:#ffd9e8;white-space:nowrap;opacity:.85}
.sil.a{left:66px;background:linear-gradient(180deg,#fbe0ee,#c98cb4);animation:leana 3.4s ease-in-out forwards}
.sil.b{right:66px;background:linear-gradient(180deg,#d7e5fb,#8aa6cf);animation:leanb 3.4s ease-in-out forwards}
.sil.b::after{content:'';position:absolute;top:-24px;left:50%;width:40px;height:46px;margin-left:-20px;border-radius:50% 50% 40% 40%;background:linear-gradient(180deg,#3a2430,#241722);opacity:.85;animation:hair 3.4s ease-in-out forwards}
@keyframes leana{0%{transform:translateX(-30px) rotate(-7deg)}45%{transform:translateX(-6px) rotate(-2deg)}72%{transform:translateX(16px) rotate(14deg)}100%{transform:translateX(14px) rotate(12deg)}}
@keyframes leanb{0%{transform:translateX(30px) rotate(7deg)}45%{transform:translateX(6px) rotate(2deg)}72%{transform:translateX(-16px) rotate(-14deg)}100%{transform:translateX(-14px) rotate(-12deg)}}
@keyframes hair{0%,40%{transform:translateY(0)}100%{transform:translateY(6px)}}
.dualtxt{position:absolute;left:-60px;right:-60px;bottom:-16px;text-align:center;font-size:13px;color:#ffd9e8;letter-spacing:.5px;text-shadow:0 1px 6px #000}