/* ============ 《狸狸通信》线上收录站 v2 ============
   配色取样自游戏实机画面：页面底 #F0F0F0 / 深色顶栏 #171310 / 文字 #404030 / 金色 #B08030 */
:root {
  --page: #F0F0F0;
  --page-deep: #E8E8E8;
  --card: #FFFFFF;
  --card-line: #D8D5CF;
  --dark: #171310;
  --dark-2: #211C15;
  --ink: #404030;
  --ink-soft: #8A8578;
  --gold: #B08030;
  --gold-bright: #F09040;
  --red: #C0392B;
  --blue: #3F6D9E;
  --q-bg: #EDE9E0;
  --a-bg: #F7F5F0;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  background: var(--page);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.85;
  overflow-x: hidden;
}

/* ---------- 进入画面 ---------- */
#entry {
  position: fixed; inset: 0; z-index: 100;
  background: radial-gradient(ellipse at 50% 40%, #241c12 0%, #0d0b08 60%, #060504 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; cursor: pointer;
  transition: opacity .9s ease;
}
#entry.gone { opacity: 0; pointer-events: none; }
#entry .stars { position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 12% 22%, rgba(255,240,200,.9) 50%, transparent 51%),
    radial-gradient(1px 1px at 28% 68%, rgba(255,240,200,.6) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 42% 14%, rgba(255,240,200,.8) 50%, transparent 51%),
    radial-gradient(1px 1px at 57% 82%, rgba(255,240,200,.7) 50%, transparent 51%),
    radial-gradient(1px 1px at 71% 33%, rgba(255,240,200,.9) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 84% 58%, rgba(255,240,200,.6) 50%, transparent 51%),
    radial-gradient(1px 1px at 93% 20%, rgba(255,240,200,.8) 50%, transparent 51%),
    radial-gradient(1px 1px at 8% 88%, rgba(255,240,200,.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 64% 6%, rgba(255,240,200,.7) 50%, transparent 51%),
    radial-gradient(1px 1px at 34% 44%, rgba(255,240,200,.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 90%, rgba(255,240,200,.6) 50%, transparent 51%),
    radial-gradient(1px 1px at 3% 38%, rgba(255,240,200,.6) 50%, transparent 51%);
  animation: twinkle 4s ease-in-out infinite alternate; }
@keyframes twinkle { from { opacity:.55; } to { opacity:1; } }
#entry .sub { font-size: 12px; letter-spacing: 10px; color: rgba(255,230,190,.55); margin-bottom: 34px; text-indent: 10px; }
#entry .brand { font-family: "STZhongsong", "SimSun", serif; font-size: 72px; font-weight: 700;
  color: #f5d9a8; letter-spacing: 20px; text-indent: 20px;
  text-shadow: 0 0 30px rgba(228,125,0,.45), 0 2px 0 #000;
  animation: rise 1.6s ease both; }
#entry .brand-en { font-size: 11px; letter-spacing: 8px; color: rgba(255,230,190,.4); margin-top: 14px; text-indent: 8px; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
#entry .enter { margin-top: 64px; padding: 12px 44px; border: 1px solid rgba(240,144,64,.85);
  color: #f2c98a; letter-spacing: 12px; text-indent: 12px; font-size: 16px; border-radius: 4px;
  background: rgba(240,144,64,.08); animation: pulse 1.8s ease-in-out infinite; }
#entry .pass-box { margin-top: 56px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
#entry .pass-label { font-size: 13px; letter-spacing: 6px; color: rgba(240,217,164,.7); text-indent: 6px; }
#entry .pass-input { position: relative; width: 220px; }
#entry .pass-input input {
  position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: text; border: none; background: transparent;
}
#entry .dots { display: flex; gap: 18px; justify-content: center; padding: 10px 0; border-bottom: 2px solid rgba(240,217,164,.35); }
#entry .dots span { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(240,217,164,.5); transition: all .18s; }
#entry .dots span.filled { background: #f0d9a4; border-color: #f0d9a4; box-shadow: 0 0 10px rgba(240,217,164,.7); }
#entry .pass-hint { font-size: 11px; color: rgba(240,217,164,.35); letter-spacing: 2px; }
#entry.shake { animation: shake .4s ease; }
@keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-10px); } 50% { transform: translateX(10px); } 75% { transform: translateX(-6px); } }
#entry .hint { margin-top: 26px; font-size: 11px; color: rgba(255,230,190,.35); letter-spacing: 3px; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(240,144,64,.35); } 50% { box-shadow: 0 0 26px 6px rgba(240,144,64,.25); } }

/* ---------- 站点外壳 ---------- */
#app { min-height: 100vh; display: flex; flex-direction: column; opacity: 0; transition: opacity .6s ease; }
#app.show { opacity: 1; }

/* 顶部报头（深色，游戏实机配色） */
header.masthead {
  background: linear-gradient(180deg, var(--dark) 0%, var(--dark-2) 100%);
  border-bottom: 2px solid var(--gold);
  padding: 14px 28px 12px;
  display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
}
header.masthead .brand-wrap { display: flex; flex-direction: column; line-height: 1.25; }
header.masthead .logo {
  font-family: "STZhongsong", "SimSun", serif; font-size: 26px; font-weight: 700; letter-spacing: 6px;
  color: #f0d9a4; text-shadow: 0 1px 0 #000;
}
header.masthead .logo-en { font-size: 8px; letter-spacing: 3px; color: rgba(240,217,164,.5); }
header.masthead nav { display: flex; gap: 6px; }
header.masthead .nav-btn {
  background: transparent; border: 1px solid rgba(240,217,164,.25); color: rgba(240,217,164,.75);
  border-radius: 4px; padding: 6px 16px; font-size: 13px; letter-spacing: 2px; cursor: pointer;
  transition: all .18s; font-family: inherit;
}
header.masthead .nav-btn:hover { border-color: var(--gold-bright); color: #fff; }
header.masthead .nav-btn.active { background: var(--gold); border-color: var(--gold); color: #fff; font-weight: 700; }
header.masthead .motto { margin-left: auto; font-size: 11px; color: rgba(240,217,164,.5); letter-spacing: 1px; }

/* 主内容 */
main.content { flex: 1; padding: 26px 34px 60px; max-width: 1100px; margin: 0 auto; width: 100%; }

.view { animation: fadein .35s ease; }
@keyframes fadein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* 列表页 */
.list-head { border-bottom: 2px solid var(--ink); padding-bottom: 10px; margin-bottom: 8px; }
.list-head h2 { font-size: 21px; letter-spacing: 3px; font-family: "STZhongsong", "SimSun", serif; }
.list-head .desc { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
.notice {
  background: #fff7e6; border: 1px solid #e8d5a8; color: #8a6d3b;
  font-size: 12px; padding: 8px 14px; border-radius: 4px; margin: 10px 0 18px; line-height: 1.7;
}
.art-list { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.art-card {
  background: var(--card); border: 1px solid var(--card-line); border-radius: 8px;
  padding: 14px 20px; cursor: pointer; position: relative; overflow: hidden;
  display: flex; gap: 16px; align-items: stretch;
  transition: all .18s ease;
}
.art-card:hover { border-color: var(--gold); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(90,70,30,.12); }
.art-card.static { cursor: default; }
.art-card .card-cover { flex: 0 0 150px; max-width: 150px; min-height: 84px; display: flex; align-items: center; justify-content: center; background: #f5f2ea; border-radius: 6px; overflow: hidden; }
.art-card .card-cover img { width: 100%; height: auto; display: block; }
.art-card .card-body { flex: 1; min-width: 0; }
.art-card .row1 { display: flex; align-items: center; gap: 8px; }
.art-card .vol {
  background: var(--gold); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 1px;
  padding: 2px 10px; border-radius: 20px; flex: 0 0 auto; white-space: nowrap;
}
.art-card .vol.pending { background: #c8c2b4; }
.art-card .badge { font-size: 10px; padding: 1px 8px; border-radius: 3px; letter-spacing: 1px; }
.art-card .badge.banned { background: var(--red); color: #fff; }
.art-card .badge.official { background: var(--blue); color: #fff; }
.art-card .badge.pending { background: #c8c2b4; color: #fff; }
.art-card .badge.partial { background: var(--gold-bright); color: #fff; }
.art-card h3 { font-size: 16px; letter-spacing: .5px; color: var(--ink); margin-top: 8px; line-height: 1.6; }
.art-card .intro { font-size: 13px; color: var(--ink-soft); margin-top: 6px; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.art-card .meta { margin-top: 10px; display: flex; gap: 16px; font-size: 12px; color: #a9a294; }
.art-card .meta .like { color: var(--red); }
.art-card .meta .cmt { color: #7a8aa5; }
.art-card:hover .arrow { opacity: 1; }
.art-card .arrow { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); opacity: 0; color: var(--gold); font-size: 20px; transition: opacity .2s; }

/* ---------- 文章页 ---------- */
.art-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.btn-back {
  background: var(--card); border: 1px solid var(--card-line); color: var(--ink-soft); border-radius: 4px;
  padding: 5px 16px; cursor: pointer; font-size: 13px; letter-spacing: 1px; font-family: inherit; transition: all .18s;
}
.btn-back:hover { border-color: var(--gold); color: var(--gold); }
.art-toolbar .crumb { font-size: 12px; color: var(--ink-soft); letter-spacing: 2px; }

.paper {
  background: var(--card); border: 1px solid var(--card-line); border-radius: 10px;
  padding: 30px 36px 40px; box-shadow: 0 10px 30px rgba(90,70,30,.08);
}
.art-head { text-align: center; border-bottom: 3px double var(--card-line); padding-bottom: 18px; }
.paper .vol-line { color: var(--gold); font-size: 13px; letter-spacing: 4px; margin-bottom: 6px; }
.paper h1.title {
  font-size: 26px; line-height: 1.5; letter-spacing: 1px;
  font-family: "STZhongsong", "SimSun", serif;
}
.paper .intro { color: var(--ink-soft); font-size: 14px; padding: 10px 0 4px; }
.paper .meta { color: #a9a294; font-size: 12px; }
.paper .stat { color: #a9a294; font-size: 12px; padding-top: 6px; }
.paper .stat .like { color: var(--red); }
.cover-wrap { margin: 16px auto 0; max-width: 620px; border-radius: 8px; overflow: hidden; border: 1px solid var(--card-line); }
.cover-wrap img { width: 100%; display: block; }

/* 文章主体：左侧分区导航 + 右侧内容 */
.art-main { display: flex; gap: 22px; margin-top: 20px; align-items: flex-start; }
.art-nav { flex: 0 0 200px; display: flex; flex-direction: column; gap: 4px; position: sticky; top: 16px; }
.art-nav .nav-item {
  text-align: left; background: transparent; border: 1px solid transparent; color: var(--ink-soft);
  border-radius: 5px; padding: 9px 14px; font-size: 13.5px; letter-spacing: 1px; cursor: pointer;
  transition: all .18s; font-family: inherit; line-height: 1.6;
}
.art-nav .nav-item:hover { background: #f7f3e8; color: var(--ink); }
.art-nav .nav-item.active {
  background: var(--gold); border-color: var(--gold); color: #fff; font-weight: 700;
}
.art-body { flex: 1; min-width: 0; }
.panel { display: none; animation: fadein .3s ease; }
.panel.active { display: block; }
.panel-head {
  background: var(--gold); color: #fff; font-size: 15px; font-weight: 700; letter-spacing: 2px;
  padding: 8px 16px; border-radius: 5px; margin-bottom: 14px;
}
.panel p { margin: 10px 0; }
.panel .dlg b { color: var(--gold); font-weight: 700; }
.hl { color: var(--gold); }
.phy { color: #7F7F7F; }
.gray { color: #75705f; }
.gold { color: #a8742a; }
.center { text-align: center; }
.big { font-size: 1.25em; font-weight: 700; }
.tagline { color: var(--gold); letter-spacing: 1px; }

/* 问答卡 */
.qa { margin-bottom: 18px; }
.qa .q-card { background: var(--q-bg); border-left: 4px solid var(--gold); padding: 14px 18px; border-radius: 4px; }
.qa .q-card .q { font-size: 14.5px; line-height: 1.8; }
.qa .q-card .asker { text-align: right; color: var(--ink-soft); font-size: 12px; margin-top: 8px; }
.qa .a-card { background: var(--a-bg); border-left: 4px solid #cfc8b8; padding: 14px 18px; border-radius: 4px; margin-top: 8px; }
.qa .a-card .a-label { color: var(--ink-soft); font-size: 13px; margin-bottom: 6px; font-weight: 700; }
.qa .a-card .a-line { margin: 6px 0; }
.qa .a-card .a-line .who { color: var(--gold); font-weight: 700; margin-right: 8px; white-space: nowrap; }

/* 时间线 */
.tl { border-left: 3px solid var(--gold); margin-left: 8px; padding-left: 22px; }
.tl .tl-item { position: relative; margin-bottom: 20px; }
.tl .tl-item::before { content: ""; position: absolute; left: -30px; top: 6px; width: 11px; height: 11px;
  border-radius: 50%; background: var(--gold); border: 2px solid #fff; box-shadow: 0 0 0 2px var(--gold); }
.tl .tl-head { color: var(--gold); font-weight: 700; letter-spacing: 1px; margin-bottom: 6px; }

/* 排行榜 */
.rank { list-style: none; }
.rank li { display: flex; justify-content: space-between; align-items: center; padding: 9px 16px; border-bottom: 1px dashed var(--card-line); }
.rank li:nth-child(1) .name { color: #c98f1b; }
.rank li .name { font-weight: 700; }
.rank li .who { color: var(--ink-soft); font-size: 13px; }
.rank-foot { font-size: 12px; color: var(--ink-soft); margin-top: 12px; }

/* 评论（带头像） */
.cmt-head { background: var(--gold); color: #fff; font-size: 14px; font-weight: 700; letter-spacing: 2px; padding: 7px 14px; border-radius: 4px; margin: 22px 0 12px; }
.cmt { display: flex; gap: 12px; padding: 13px 0; border-bottom: 1px solid #ece9e1; }
.cmt .avatar { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%;
  background: linear-gradient(135deg, #f7c873, #e4912f); color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700; overflow: hidden; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--card-line); }
.cmt .avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cmt .avatar.noimg { background: linear-gradient(135deg, #d9b978, #b08030); }
.cmt .avatar.mini { width: 24px; height: 24px; flex-basis: 24px; font-size: 11px; display: inline-flex; vertical-align: middle; margin-right: 6px; }
.cmt .body { flex: 1; min-width: 0; }
.cmt .name { font-size: 12.5px; color: #8a7a5c; display: flex; align-items: center; gap: 6px; }
.cmt .name .tag { font-size: 10px; background: var(--blue); color: #fff; border-radius: 3px; padding: 0 5px; }
.cmt .txt { font-size: 14px; margin-top: 4px; }
.cmt .reply { margin-top: 8px; padding-left: 12px; border-left: 2px solid var(--card-line); }
.cmt .reply .r-item { margin-top: 8px; }
.cmt .reply .r-item .who { color: var(--gold); font-weight: 700; margin-right: 2px; }
.cmt .like-btn { cursor: pointer; user-select: none; color: #b7ab90; font-size: 13px; transition: color .15s; display: inline-block; margin-top: 4px; }
.cmt .like-btn.on { color: var(--red); }
.cmt-empty { color: var(--ink-soft); font-size: 13px; padding: 10px 0; }

/* 上一篇/下一篇 */
.pager { display: flex; gap: 12px; margin-top: 22px; }
.pager .pg {
  flex: 1; border: 1px solid var(--card-line); background: var(--card); border-radius: 8px; padding: 12px 16px; cursor: pointer;
  transition: all .18s; font-family: inherit;
}
.pager .pg:hover { border-color: var(--gold); background: #fffaf0; }
.pager .pg .pg-label { font-size: 11px; color: #b7ab90; letter-spacing: 2px; }
.pager .pg .pg-title { font-size: 13.5px; margin-top: 4px; line-height: 1.6; color: var(--ink); }
.pager .pg.next { text-align: right; }
.pager .pg.disabled { opacity: .35; pointer-events: none; }

/* 占位文章 */
.pending-box { border: 1px dashed var(--card-line); border-radius: 8px; padding: 46px 30px; text-align: center; color: var(--ink-soft); }
.pending-box .t { font-size: 15px; margin-bottom: 8px; }
.pending-box .s { font-size: 12px; }

.imgph {
  border: 1px dashed #d8cfbc; background: repeating-linear-gradient(45deg, #fbf7ec, #fbf7ec 10px, #f7f1e2 10px, #f7f1e2 20px);
  color: #b7ab90; text-align: center; font-size: 12px; padding: 42px 0; border-radius: 6px; letter-spacing: 3px;
}

/* 占位页（赞助方/联系我们） */
.info-page p { margin: 10px 0; }
.info-page ul { margin: 10px 0 10px 22px; }
.info-page li { margin: 8px 0; }

/* 页脚 */
footer { border-top: 1px solid var(--card-line); padding: 16px 28px; text-align: center; font-size: 11px; color: #b7ab90; letter-spacing: 2px; background: #ffffff; }

/* 滚动条 */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-thumb { background: #d8cfbc; border-radius: 5px; }
::-webkit-scrollbar-track { background: transparent; }

/* 响应式 */
@media (max-width: 860px) {
  header.masthead { flex-direction: column; align-items: flex-start; gap: 10px; padding: 12px 14px; }
  header.masthead .motto { display: none; }
  header.masthead nav { width: 100%; overflow-x: auto; padding-bottom: 2px; -webkit-overflow-scrolling: touch; }
  header.masthead .nav-btn { flex: 0 0 auto; padding: 6px 13px; font-size: 12.5px; }
  header.masthead .logo { font-size: 22px; }
  .art-main { flex-direction: column; gap: 12px; }
  .art-nav { flex: none; width: 100%; flex-direction: row; flex-wrap: wrap; position: static; gap: 6px; }
  .art-nav .nav-item { flex: 1 1 auto; min-width: 44%; text-align: center; padding: 8px 8px; font-size: 12.5px; }
  .paper { padding: 20px 14px 24px; }
  .paper h1.title { font-size: 20px; }
  .paper .intro { font-size: 13px; }
  .cover-wrap { margin-top: 12px; }
  #entry .brand { font-size: 44px; letter-spacing: 10px; text-indent: 10px; }
  #entry .sub { font-size: 10px; letter-spacing: 6px; text-indent: 6px; }
  #entry .enter { margin-top: 40px; padding: 11px 30px; font-size: 14px; }
  #entry .pass-box { margin-top: 42px; }
  main.content { padding: 16px 12px 40px; }
  .list-head h2 { font-size: 18px; }
  .art-card { flex-direction: column; padding: 12px 14px; }
  .art-card .card-cover { flex: none; max-width: none; width: 100%; min-height: 0; }
  .art-card h3 { font-size: 15px; }
  .pager { flex-direction: column; }
  .pager .pg.next { text-align: left; }
  .cmt .avatar { width: 38px; height: 38px; flex-basis: 38px; font-size: 15px; }
  .qa .q-card, .qa .a-card { padding: 12px 14px; }
}

@media (max-width: 420px) {
  #entry .brand { font-size: 34px; letter-spacing: 7px; text-indent: 7px; }
  #entry .brand-en { font-size: 9px; letter-spacing: 4px; text-indent: 4px; }
  #entry .pass-input { width: 190px; }
  .paper h1.title { font-size: 18px; }
  .art-nav .nav-item { min-width: 100%; }
  .notice { font-size: 11px; }
  .art-toolbar { flex-wrap: wrap; }
}