/* WuTangName — Wu-Tang name generator site styles
   视觉语言：黑金海报风（hip-hop 12寸唱片文化），克制的双色板（黑 #0B0B0D / 金 #F7C948）+ 白
   红线：交互反馈零几何位移（30.1）、可点元素三态、prefers-reduced-motion 兜底 */
:root{--bg:#0B0B0D;--bg-soft:#121216;--card:#17171C;--ink:#F5F2EA;--mut:#9B978C;--gold:#F7C948;--gold-deep:#D9A521;--line:#26262E;--ok:#4ADE80;--rad:14px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.65 "Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--gold);text-decoration:none}
a:hover{text-decoration:underline}
img,svg{max-width:100%}

/* ---------- 常驻氛围：金色浮尘（canvas 固定铺底，不参与布局） ---------- */
#fx{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.55}
@media (prefers-reduced-motion:reduce){#fx{display:none}}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(11,11,13,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav-in{max-width:1080px;margin:0 auto;display:flex;align-items:center;gap:18px;padding:12px 20px}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:18px;letter-spacing:.06em;color:var(--ink)}
.brand:hover{text-decoration:none}
.brand b{color:var(--gold)}
.nav-links{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap;justify-content:flex-end}
.nav-links::-webkit-scrollbar{display:none}
.nav-links a{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:9px;color:var(--mut);font-size:14px;white-space:nowrap;transition:background-color .15s,color .15s}
.nav-links a:hover{color:var(--ink);background:var(--bg-soft);text-decoration:none}
.nav-links a.on{color:var(--gold);background:rgba(247,201,72,.09)}
.nav-links a:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media (max-width:720px){.nav-in{flex-wrap:wrap}.nav-links{margin-left:0;width:100%;justify-content:flex-start}}

/* ---------- 布局 ---------- */
.wrap{position:relative;z-index:1;max-width:1080px;margin:0 auto;padding:18px 20px 0}
.crumbs{display:flex;gap:8px;align-items:center;color:var(--mut);font-size:13px;padding:8px 0 0}
.crumbs a{color:var(--mut)}
.hero{display:flex;gap:28px;align-items:center;padding:34px 0 10px}
.hero h1{font-size:clamp(34px,6.4vw,72px);line-height:1.04;font-weight:900;letter-spacing:-.015em;margin:0 0 14px;text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--gold);text-shadow:0 0 34px rgba(247,201,72,.35)}
.lead{color:var(--mut);font-size:clamp(15px,2vw,18px);max-width:640px;margin:0 0 20px}
.hero-img{flex:0 0 300px;border-radius:var(--rad)}
@media (max-width:860px){.hero{flex-direction:column;align-items:flex-start}.hero-img{flex:0 0 auto;width:min(300px,78%)}}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--gold);color:#141310;font-weight:800;font-size:16px;padding:14px 26px;border:0;border-radius:999px;cursor:pointer;letter-spacing:.02em;transition:box-shadow .15s,transform .05s;box-shadow:0 6px 24px rgba(247,201,72,.22)}
.btn:hover{box-shadow:0 8px 30px rgba(247,201,72,.4);text-decoration:none}
.btn:active{transform:scale(.97)}
.btn:focus-visible{outline:3px solid #fff;outline-offset:2px}
.btn.ghost{background:transparent;color:var(--gold);border:1.5px solid var(--gold);box-shadow:none}
.btn.ghost:hover{background:rgba(247,201,72,.08)}

/* ---------- 生成器 ---------- */
.gen{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:26px;margin:26px 0}
.gen-grid{display:flex;gap:14px;flex-wrap:wrap}
.field{flex:1 1 220px}
.field label{display:block;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);margin-bottom:7px}
.field input{width:100%;background:var(--bg-soft);border:1.5px solid var(--line);border-radius:11px;color:var(--ink);font-size:17px;padding:13px 15px;transition:border-color .15s}
.field input:hover{border-color:#3A3A44}
.field input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(247,201,72,.18)}
.gen-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:18px}
.gen-note{color:var(--mut);font-size:13px;margin:10px 0 0}

/* 结果卡：预置高度防位移；名字出现用 opacity 动画不撑布局 */
.result{margin-top:20px;border:1.5px solid rgba(247,201,72,.4);border-radius:16px;padding:26px 24px;background:linear-gradient(160deg,rgba(247,201,72,.07),rgba(247,201,72,.015));min-height:150px}
.result .tag{font-size:12px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.result .name{font-size:clamp(30px,5.6vw,54px);font-weight:900;letter-spacing:-.01em;line-height:1.08;margin:10px 0 4px;opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s}
.result.show .name{opacity:1;transform:none}
.result .meaning{color:var(--mut);font-size:15px;margin:8px 0 0}
.result-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
@media (prefers-reduced-motion:reduce){.result .name{transition:none;transform:none}}

/* 双态叠层复制按钮（30.1：几何恒定） */
.copy-btn{position:relative;display:inline-grid;border:0;background:var(--gold);color:#141310;font-weight:800;font-size:14px;border-radius:999px;cursor:pointer;padding:0;overflow:hidden}
.copy-btn>span{grid-area:1/1;padding:11px 20px;white-space:nowrap;transition:opacity .18s,transform .18s}
.copy-btn .c2{opacity:0;transform:translateY(6px)}
.copy-btn.done .c1{opacity:0;transform:translateY(-6px)}
.copy-btn.done .c2{opacity:1;transform:none}
.copy-btn:hover{box-shadow:0 4px 16px rgba(247,201,72,.35)}
.copy-btn:active{transform:scale(.97)}
.copy-btn:focus-visible{outline:3px solid #fff;outline-offset:2px}
.copy-btn.ghost{background:transparent;border:1.5px solid var(--gold);color:var(--gold)}
.copy-btn.ghost:hover{background:rgba(247,201,72,.08);box-shadow:none}
@media (prefers-reduced-motion:reduce){.copy-btn>span{transition:none}}

/* 历史 */
.history{margin-top:16px}
.history h3{font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);margin:0 0 10px}
.hist-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:9px 12px;border:1px solid var(--line);border-radius:11px;margin-bottom:8px;background:var(--bg-soft)}
.hist-row b{font-size:16px}
.hist-row .when{color:var(--mut);font-size:13px;margin-left:auto}

/* ---------- 群体模式 ---------- */
.group-out{margin-top:20px}
.group-table{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.tbl-wrap{overflow-x:auto}
.group-table th,.group-table td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
.group-table th{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);background:var(--bg-soft)}
.group-table tr:last-child td{border-bottom:0}
.group-table td b{color:var(--gold);font-size:16px}

/* ---------- 内容区 ---------- */
.prose{max-width:800px}
main p{max-width:780px}
h2{font-size:clamp(22px,3.4vw,30px);font-weight:800;letter-spacing:-.01em;margin:38px 0 12px}
h3{font-size:19px;font-weight:800;margin:22px 0 8px}
.prose-p{color:#CFCBC0;margin:0 0 14px}
.prose-p b,.prose-p strong{color:var(--ink)}
.faq h3{color:var(--gold)}
.faq p{color:#CFCBC0;margin:0 0 18px}

/* 词条词典 */
.dict{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;margin:20px 0}
.dict-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.dict-card b{color:var(--gold);font-size:17px}
.dict-card p{color:var(--mut);font-size:14px;margin:6px 0 0}
.dict-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 4px}
.dict-tab{background:var(--bg-soft);border:1.5px solid var(--line);color:var(--mut);font-weight:700;font-size:14px;border-radius:999px;padding:9px 18px;cursor:pointer}
.dict-tab:hover{color:var(--ink);border-color:#3A3A44}
.dict-tab.on{background:var(--gold);border-color:var(--gold);color:#141310}
.dict-tab:focus-visible{outline:3px solid #fff;outline-offset:2px}

/* 入口卡 */
.entry-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px;margin:18px 0 8px}
.entry-card{display:block;background:var(--card);border:1px solid var(--line);border-radius:13px;padding:16px 18px;color:var(--ink);transition:border-color .15s,background-color .15s}
.entry-card:hover{border-color:rgba(247,201,72,.5);background:#1B1B21;text-decoration:none}
.entry-card:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.entry-card b{display:block;font-size:16px;margin-bottom:5px}
.entry-card span{color:var(--mut);font-size:14px}

/* ---------- 分享条 ---------- */
.share-row{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}
.share-row a,.share-row button{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--line);background:var(--bg-soft);color:var(--ink);font-size:13px;font-weight:700;border-radius:999px;padding:8px 14px;cursor:pointer;transition:border-color .15s,background-color .15s}
.share-row a:hover,.share-row button:hover{border-color:var(--gold);color:var(--gold);text-decoration:none}
.share-row a:focus-visible,.share-row button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ---------- 卡片式提示 ---------- */
.note-card{display:flex;gap:12px;align-items:flex-start;background:rgba(247,201,72,.06);border:1px solid rgba(247,201,72,.3);border-radius:12px;padding:14px 16px;margin:18px 0;max-width:800px}
.note-card .ico{flex:0 0 auto;font-size:18px}
.note-card p{margin:0;color:#D8D4C8;font-size:14.5px}

/* ---------- pn 互链 ---------- */
.pn{display:flex;gap:16px;flex-wrap:wrap;margin:30px 0 10px}
.pn a{font-weight:700;font-size:15px}

/* ---------- footer ---------- */
.footer-note{color:#6E6A61;font-size:13px;max-width:800px;margin:40px 0 8px}
.site{border-top:1px solid var(--line);margin-top:14px;padding:34px 0 44px;position:relative;z-index:1}
.footer-in{max-width:1080px;margin:0 auto;padding:0 20px;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:26px}
.site h4{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:0 0 12px}
.site a{display:block;color:var(--mut);font-size:14px;padding:4px 0}
.site a:hover{color:var(--ink)}
.brand-line{grid-column:1/-1;display:flex;align-items:center;gap:9px;color:var(--mut);font-size:14px}

/* 404 */
.nf{padding:80px 0;text-align:center}
.nf h1{font-size:clamp(60px,14vw,150px);margin:0;color:var(--gold);font-weight:900;line-height:1}
.nf p{color:var(--mut)}