/* ================= 基础 ================= */
* { margin:0; padding:0; box-sizing:border-box; }
html{ overflow-x:hidden; }     /* 防任何元素把移动端布局撑成"电脑模式" */
html,body { height:100%; }
body {
  font-family: "PingFang SC","Microsoft YaHei","Helvetica Neue",sans-serif;
  background:#cfd8e3; color:#22303f; overflow-x:hidden;
  transition:background-color .5s ease;
  -webkit-font-smoothing:antialiased;
}
a { text-decoration:none; color:inherit; }
:root { font-size:16px; }
@media (max-width:640px){ :root{ font-size:15px; } }

/* ================= Loading（完全沿用原站样式） ================= */
.loading_wrapper{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  position:fixed; inset:0; z-index:9999;
  background:url("assets/loading_bg.png") no-repeat; background-size:cover;
  transition:opacity .9s ease;
}
.loading_wrapper.fade-out{ opacity:0; pointer-events:none; }
.loading_wrapper .avatar_img{ width:8.3333333333rem; height:10.6666666667rem; }
.loading_wrapper .avatar_img .hide{ position:absolute; opacity:0; }
.loading_wrapper .avatar_img img{ width:100%; display:block; }
.loading_wrapper .progress_wrapper{ display:flex; flex-direction:column; align-items:center; margin-top:.4666666667rem; }
.loading_wrapper .progress_wrapper .title{
  font-family:"TVPS", "PingFang SC", sans-serif; color:#1289f9; font-size:1.2rem; font-weight:700;
  letter-spacing:.12em; text-shadow:0 2px 12px rgba(18,137,249,.35);
}
.loading_wrapper .progress_wrapper .percent{
  margin-top:.3666666667rem; font-size:.8666666667rem; color:#1289f9; letter-spacing:.15em; font-weight:700;
}

/* ================= 背景：随机二次元壁纸（t.alcy.cc/ycy） ================= */
#bg{
  position:fixed; inset:0; z-index:-2;
  background:#cfd8e3 url("assets/bg_fallback.webp") no-repeat center/cover;  /* 离线兜底图 */
  opacity:0; transition:opacity 1.2s ease;
}
#bg.loaded{ opacity:1; }
#veil{
  position:fixed; inset:0; z-index:-1;
  background:rgba(240,244,250,.42);
  transition:background .4s ease;
}

/* ================= 导航站 ================= */
#site{ opacity:0; transition:opacity 1.1s ease; min-height:100vh; }
#site.show{ opacity:1; }

.wrap{ max-width:1040px; margin:0 auto; padding:0 20px 72px; }

header{ padding:56px 0 6px; text-align:center; }
h1.site-title{
  font-size:clamp(1.9rem,4.6vw,2.7rem); letter-spacing:.28em; font-weight:800;
  color:#ffffff; text-shadow:0 1px 14px rgba(15,23,42,.5);
}
h1.site-title em{ font-style:normal; color:#ff86b3; }
.slogan{
  margin-top:8px; color:rgba(255,255,255,.92); font-size:.84rem; letter-spacing:.18em;
  text-shadow:0 1px 8px rgba(15,23,42,.5);
}

.search-box{
  margin:34px auto 0; max-width:600px; display:flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.92); border:1px solid rgba(34,48,63,.14); border-radius:6px;
  padding:6px 6px 6px 16px; box-shadow:0 2px 10px rgba(31,45,61,.08);
  transition:border-color .2s, box-shadow .2s;
}
.search-box:focus-within{ border-color:#1289f9; box-shadow:0 0 0 3px rgba(18,137,249,.15); }
.search-box input{ flex:1; background:none; border:none; outline:none; color:#22303f; font-size:.95rem; }
.search-box input::placeholder{ color:#93a3b3; }
.search-box .engines{ display:flex; gap:6px; }
.search-go{
  flex:0 0 auto; width:32px; height:32px; border:none; border-radius:5px; cursor:pointer;
  background:#1289f9; color:#fff; display:grid; place-items:center;
  transition:background .2s, transform .15s;
}
.search-go:hover{ background:#36a8ff; }
.search-go:active{ transform:scale(.9); }
.engine-btn{
  cursor:pointer; border:1px solid transparent; border-radius:4px; padding:8px 16px; font-size:.86rem;
  color:#4a5b6e; background:transparent; transition:.2s; white-space:nowrap;
}
.engine-btn:hover{ color:#1289f9; background:rgba(18,137,249,.08); }
.engine-btn.active{ background:#1289f9; color:#fff; }

section{ margin-top:44px; opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }
section.in{ opacity:1; transform:none; }
.sec-head{ display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.sec-head .bar{ width:4px; height:16px; background:#1289f9; border-radius:2px; }
.sec-head h2{ font-size:1.08rem; letter-spacing:.22em; color:#1c2b3a; font-weight:700; }
.sec-head .line{ flex:1; height:1px; background:rgba(34,48,63,.14); }

.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:10px; }
.card{
  display:flex; align-items:center; gap:12px; padding:13px 14px; border-radius:6px;
  background:rgba(255,255,255,.88); border:1px solid rgba(34,48,63,.1);
  box-shadow:0 1px 4px rgba(31,45,61,.06);
  transition:transform .18s ease, border-color .18s, box-shadow .18s;
}
.card:hover{
  transform:translateY(-2px); border-color:#1289f9;
  box-shadow:0 6px 16px rgba(31,45,61,.14);
}
.icon{
  width:38px; height:38px; flex:0 0 38px; border-radius:4px; overflow:hidden;
  background:#eef2f6; border:1px solid rgba(34,48,63,.08);
  display:grid; place-items:center;
}
.icon img{ width:24px; height:24px; object-fit:contain; display:block; }
.card .name{ font-size:.94rem; color:#22303f; font-weight:600; }
.card .desc{ font-size:.72rem; color:#8494a5; margin-top:2px; }
.card .tag{
  display:inline-block; vertical-align:2px; margin-left:7px;
  font-size:.6rem; font-weight:700; letter-spacing:.06em; line-height:1;
  padding:3px 6px; border-radius:4px;
  color:#1289f9; background:rgba(18,137,249,.1); border:1px solid rgba(18,137,249,.25);
}

footer{
  margin-top:64px; text-align:center; color:#7c8b9a; font-size:.76rem; letter-spacing:.28em;
  background:rgba(255,255,255,.5); display:table; margin-left:auto; margin-right:auto;
  padding:8px 18px; border-radius:4px;
}
footer .mark{ color:#1289f9; }

@media (max-width:640px){
  header{ padding:34px 0 4px; }
  .grid{ grid-template-columns:repeat(2,1fr); gap:8px; }
  /* 顶栏/栏目间距收紧，避免「个人/友链/赞助」在手机上显得松散空荡 */
  .search-box{ margin-top:24px; flex-wrap:wrap; padding:8px 10px; }
  .search-box input{ flex:1 1 0; width:auto; padding:6px 4px; }
  .search-box .engines{ width:100%; justify-content:space-between; }
  .engine-btn{ flex:1; }
  section{ margin-top:30px; }
  .sec-head{ margin-bottom:12px; }
  .slogan{ margin-top:6px; letter-spacing:.14em; }
  .counter-pill{ margin-top:12px; }
  .sponsor-grid{ gap:8px; }
  footer{ margin-top:44px; }
  /* 窄屏下灵动岛移到控制区下方，避免遮挡明暗切换按钮 */
  .island{ top:60px; }
}

/* ================= 右上角控制区 ================= */
.top-controls{ position:fixed; top:16px; right:16px; z-index:100; display:flex; gap:8px; }
.ctrl-btn{
  width:38px; height:38px; cursor:pointer; border-radius:8px;
  display:grid; place-items:center; color:#22303f;
  background:rgba(255,255,255,.85); border:1px solid rgba(34,48,63,.14);
  box-shadow:0 1px 4px rgba(31,45,61,.1);
  transition:border-color .2s, color .2s, transform .15s;
}
.ctrl-btn:hover{ border-color:#1289f9; color:#1289f9; }
.ctrl-btn:active{ transform:scale(.92); }
.ctrl-btn .icon-sun{ display:none; }
.dark .ctrl-btn .icon-sun{ display:block; }
.dark .ctrl-btn .icon-moon{ display:none; }

.setting-panel{
  position:absolute; top:46px; right:0; width:150px; padding:10px; border-radius:8px;
  background:rgba(255,255,255,.95); border:1px solid rgba(34,48,63,.12);
  box-shadow:0 8px 24px rgba(31,45,61,.16);
  opacity:0; transform:translateY(-6px) scale(.96); pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}
.setting-panel.open{ opacity:1; transform:none; pointer-events:auto; }
.panel-title{ font-size:.72rem; color:#8494a5; letter-spacing:.18em; margin:2px 4px 8px; }
.panel-divider{ height:1px; background:rgba(34,48,63,.1); margin:8px 2px; }
.dark .panel-divider{ background:rgba(255,255,255,.1); }

/* 页面缩放滑杆（仅电脑端显示） */
.zoom-row{ padding:0 2px 4px; }
.zoom-ctrl{ display:flex; align-items:center; gap:10px; padding:0 4px; }
.zoom-ctrl input[type=range]{
  flex:1; accent-color:#1289f9; cursor:pointer; height:3px;
}
.zoom-ctrl span{ font-size:.75rem; color:#1289f9; font-weight:700; min-width:38px; text-align:right; }
@media (max-width:1024px), (pointer:coarse){
  #zoomRow, #zoomRow + .panel-divider{ display:none; }
}

/* 灵动岛超时保护：太久没完 → 先缩小，再超时则自动消失 */
.island.mini{
  transform:translateX(-50%) scale(.58);
  opacity:.85;
  transition:transform .5s cubic-bezier(.5,0,.2,1), opacity .5s ease;
}
.mode-btn{
  display:block; width:100%; text-align:left; cursor:pointer;
  padding:8px 10px; border:none; border-radius:4px; background:transparent;
  font-size:.84rem; color:#3a4a5c; transition:background .15s, color .15s;
}
.mode-btn svg{ opacity:.7; }
.mode-btn:hover{ background:rgba(18,137,249,.08); color:#1289f9; }
.mode-btn.active{ background:#1289f9; color:#fff; }

/* ================= 毛玻璃 / 液态玻璃 ================= */
.glass-frosted .card,
.glass-frosted .search-box,
.glass-frosted footer,
.glass-frosted .ctrl-btn,
.glass-frosted .setting-panel,
.glass-frosted.counter-pill,
.glass-frosted.ad-item,
.glass-frosted.ad-marquee{
  background:rgba(255,255,255,.48);
  backdrop-filter:blur(18px) saturate(1.3); -webkit-backdrop-filter:blur(18px) saturate(1.3);
  border-color:rgba(255,255,255,.6);
}
.dark .glass-frosted .card,
.dark .glass-frosted .search-box,
.dark .glass-frosted footer,
.dark .glass-frosted .ctrl-btn,
.dark .glass-frosted .setting-panel,
.dark .glass-frosted.counter-pill,
.dark .glass-frosted.ad-item,
.dark .glass-frosted.ad-marquee{
  background:rgba(21,28,40,.52);
  border-color:rgba(255,255,255,.12);
}

/* 液态玻璃模式下压低遮罩，让玻璃真正"透"出壁纸 */
.glass-liquid #veil{ background:rgba(240,244,250,.18); }
.dark .glass-liquid #veil{ background:rgba(10,14,21,.32); }

.glass-liquid .card,
.glass-liquid .search-box,
.glass-liquid footer,
.glass-liquid .ctrl-btn,
.glass-liquid .setting-panel,
.glass-liquid.counter-pill,
.glass-liquid.ad-item,
.glass-liquid.ad-marquee{
  background:rgba(255,255,255,.13);
  backdrop-filter:blur(42px) saturate(2) brightness(1.08);
  -webkit-backdrop-filter:blur(42px) saturate(2) brightness(1.08);
  border:1px solid rgba(255,255,255,.72);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.85),
    inset 0 -1px 1px rgba(255,255,255,.22),
    inset 1px 0 1px rgba(255,255,255,.25),
    0 14px 34px rgba(31,45,61,.14);
  text-shadow:0 1px 6px rgba(255,255,255,.35);
}
.glass-liquid .card:hover{
  border-color:#fff;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.9),
    inset 0 -1px 1px rgba(255,255,255,.22),
    0 16px 38px rgba(31,45,61,.2);
}
.glass-liquid .icon{ background:rgba(255,255,255,.4); border-color:rgba(255,255,255,.7); }
.glass-liquid .card .name{ color:#16222f; }
.glass-liquid .card .desc{ color:rgba(45,62,80,.85); }

.dark .glass-liquid .card,
.dark .glass-liquid .search-box,
.dark .glass-liquid footer,
.dark .glass-liquid .ctrl-btn,
.dark .glass-liquid .setting-panel,
.dark .glass-liquid.counter-pill,
.dark .glass-liquid.ad-item,
.dark .glass-liquid.ad-marquee{
  background:rgba(12,18,29,.22);
  backdrop-filter:blur(42px) saturate(1.7) brightness(1.05);
  -webkit-backdrop-filter:blur(42px) saturate(1.7) brightness(1.05);
  border:1px solid rgba(255,255,255,.24);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.28),
    inset 0 -1px 1px rgba(255,255,255,.06),
    0 14px 34px rgba(0,0,0,.35);
  text-shadow:none;
}
.dark .glass-liquid .card:hover{
  border-color:rgba(255,255,255,.42);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.3), 0 16px 38px rgba(0,0,0,.45);
}
.dark .glass-liquid .icon{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.16); }
.dark .glass-liquid .card .name{ color:#eef3f8; }
.dark .glass-liquid .card .desc{ color:#93a5b8; }

/* ================= 暗色模式 ================= */
/* ================= 暗色模式（画布色只给 body，不给 #site —— 否则不透明背景会盖住负 z 的 #bg） ================= */
html.dark body{ background:#0c111a; }
.dark #veil{ background:rgba(10,14,21,.55); }
.dark h1.site-title{ text-shadow:0 1px 14px rgba(0,0,0,.6); }
.dark .slogan{ color:rgba(232,237,243,.9); text-shadow:0 1px 8px rgba(0,0,0,.6); }
.dark .sec-head h2{ color:#e8edf3; }
.dark .sec-head .line{ background:rgba(255,255,255,.14); }

.dark .card{
  background:rgba(22,28,39,.88); border-color:rgba(255,255,255,.07);
  box-shadow:0 1px 4px rgba(0,0,0,.3);
}
.dark .card:hover{ border-color:#1289f9; box-shadow:0 6px 16px rgba(0,0,0,.45); }
.dark .card .name{ color:#e8edf3; }
.dark .card .desc{ color:#7d8ea0; }
.dark .card .tag{ color:#53a9fb; background:rgba(18,137,249,.16); border-color:rgba(83,169,251,.3); }
.dark .icon{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.08); }

.dark .search-box{ background:rgba(22,28,39,.9); border-color:rgba(255,255,255,.12); box-shadow:0 2px 10px rgba(0,0,0,.3); }
.dark .search-box input{ color:#e8edf3; }
.dark .search-box input::placeholder{ color:#5c6d80; }
.dark .engine-btn{ color:#9fb0c3; }
.dark .engine-btn:hover{ color:#1289f9; background:rgba(18,137,249,.14); }

.dark footer{ color:#6b7a8c; background:rgba(22,28,39,.55); }
.dark .ctrl-btn{ background:rgba(22,28,39,.85); border-color:rgba(255,255,255,.12); color:#cfe0f0; box-shadow:0 1px 4px rgba(0,0,0,.3); }
.dark .setting-panel{ background:rgba(22,28,39,.95); border-color:rgba(255,255,255,.12); box-shadow:0 8px 24px rgba(0,0,0,.45); }
.dark .panel-title{ color:#6b7a8c; }
.dark .mode-btn{ color:#b7c5d4; }
.dark .mode-btn:hover{ background:rgba(18,137,249,.16); color:#53a9fb; }


/* 明攻克隆层：冻结其全部后代元素的过渡与动画（防干扰/防冒泡事件），
   根元素自身的 clip-path 过渡不受影响（* 只选后代） */
.reveal-clone *{ transition:none !important; animation:none !important; }

/* 换装瞬间的全页冻结帧：防止真实页面残留的主题上色过渡在显露后“闪一下” */
html.nw-trans *{ transition:none !important; animation:none !important; }

/* ================= 访问量计数器 ================= */
.counter-pill{
  margin-top:16px; display:inline-flex; align-items:center; gap:7px;
  padding:7px 15px; border-radius:999px; cursor:pointer;
  background:rgba(255,255,255,.75); border:1px solid rgba(34,48,63,.14);
  color:#5d6f82; font-size:.76rem; letter-spacing:.08em;
  box-shadow:0 1px 4px rgba(31,45,61,.08);
  transition:border-color .2s, color .2s;
}
.counter-pill:hover{ border-color:#1289f9; color:#1289f9; }
.counter-pill svg{ display:block; }
.counter-num{
  display:inline-flex; align-items:center; min-width:2.4em;
  font-weight:700; color:#1289f9; font-size:.82rem; line-height:1; font-variant-numeric:tabular-nums;
}
.digit{
  position:relative; display:inline-flex; height:1em; width:.6em; overflow:hidden;
  align-items:center; justify-content:center;
}
.digit .strip{
  position:absolute; left:0; top:0; width:100%; display:flex; flex-direction:column;
  transition:transform .65s cubic-bezier(.34,1.2,.4,1); will-change:transform;
}
.digit .strip span{
  height:1em; line-height:1; display:flex; align-items:center; justify-content:center;
}
.digit.comma{ width:.3em; }
.dark .counter-pill{ background:rgba(22,28,39,.85); border-color:rgba(255,255,255,.12); color:#9fb0c3; }
.dark .counter-num{ color:#53a9fb; }

/* ================= 赞助支持：赞赏码 + 广告位 ================= */
.sponsor-grid{ display:grid; grid-template-columns:minmax(220px,280px) 1fr; gap:10px; align-items:stretch; }
.reward-card{ cursor:pointer; text-align:left; }
.reward-card .reward-icon img{ width:38px; height:38px; object-fit:cover; border-radius:3px; }
.reward-text .name{ font-size:.94rem; }

.ad-marquee{
  overflow:hidden; border-radius:6px; position:relative;
  border:1px solid rgba(34,48,63,.1); background:rgba(255,255,255,.55);
  display:flex; align-items:center;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.ad-track{ display:inline-flex; gap:10px; padding:10px; animation:adScroll 22s linear infinite; }
.ad-marquee:hover .ad-track{ animation-play-state:paused; }
@keyframes adScroll{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } }  /* 从左向右匀速滑动 */

.ad-item{
  flex:0 0 auto; display:flex; align-items:center; gap:8px; padding:8px 14px; border-radius:5px;
  background:rgba(255,255,255,.9); border:1px solid rgba(34,48,63,.1);
  font-size:.78rem; color:#4a5b6e; white-space:nowrap; cursor:pointer; text-decoration:none;
  transition:border-color .2s, transform .15s;
}
.ad-item:hover{ border-color:#1289f9; transform:translateY(-1px); }
.ad-item img{ height:26px; width:auto; max-width:150px; border-radius:4px; object-fit:contain; display:block; }
.ad-item.rent{ border-style:dashed; color:#1289f9; background:rgba(18,137,249,.06); }

.dark .ad-marquee{ background:rgba(22,28,39,.55); border-color:rgba(255,255,255,.08); }
.dark .ad-item{ background:rgba(28,35,48,.92); border-color:rgba(255,255,255,.08); color:#b7c5d4; }
.dark .ad-item.rent{ background:rgba(83,169,251,.1); color:#53a9fb; }

/* ================= 弹窗 ================= */
.modal{ position:fixed; inset:0; z-index:400; display:grid; place-items:center;
  opacity:0; pointer-events:none; transition:opacity .28s ease; }
.modal.open{ opacity:1; pointer-events:auto; }
.modal-mask{ position:absolute; inset:0; background:rgba(10,14,21,.55); backdrop-filter:blur(6px); }
.modal-body{
  position:relative; background:#fff; border-radius:8px; padding:16px;
  max-width:min(340px, 86vw); text-align:center;
  transform:scale(.92) translateY(10px); transition:transform .28s cubic-bezier(.34,1.3,.4,1);
  box-shadow:0 24px 60px rgba(0,0,0,.35);
}
.modal.open .modal-body{ transform:none; }
.modal-body img{ width:100%; border-radius:5px; display:block; }
.modal-body p{ margin-top:12px; font-size:.82rem; color:#5d6f82; letter-spacing:.1em; }
.modal-close{
  position:absolute; top:-10px; right:-10px; width:30px; height:30px; border-radius:50%;
  border:none; cursor:pointer; background:#1289f9; color:#fff; display:grid; place-items:center;
  box-shadow:0 4px 12px rgba(18,137,249,.4);
}

@media (max-width:640px){
  .sponsor-grid{ grid-template-columns:1fr; }
  .ad-marquee{ min-height:52px; }
}

/* ================= 灵动岛：加载进度 ================= */
.island{
  position:fixed; top:14px; left:50%; z-index:120;
  width:196px; height:32px; border-radius:999px;
  background:rgba(16,18,22,.94);
  display:flex; align-items:center; gap:8px; padding:0 13px;
  color:#f5f7fa; font-size:.72rem; letter-spacing:.05em;
  box-shadow:0 6px 18px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08);
  overflow:hidden;
  transform:translateX(-50%);
  transition:opacity .55s ease, transform .55s cubic-bezier(.34,1.3,.4,1);
}
.island-fill{
  position:absolute; left:0; top:0; bottom:0; width:0;
  background:rgba(255,255,255,.13); transition:width .35s ease;
}
.island-spinner{
  position:relative; flex:0 0 auto;
  width:13px; height:13px; border-radius:50%;
  border:2px solid rgba(255,255,255,.22); border-top-color:#fff;
  animation:island-spin .75s linear infinite;
}
@keyframes island-spin{ to{ transform:rotate(360deg); } }
.island-check{ display:none; position:relative; flex:0 0 auto; }
.island.done .island-spinner{ display:none; }
.island.done .island-check{ display:block; }
.island.done .island-fill{ background:rgba(74,222,128,.16); }
.island-text{ position:relative; white-space:nowrap; }
/* 完成后停留 1s，再平滑变小上飘消失 */
.island.hide{
  opacity:0;
  transform:translate(-50%,-14px) scale(.32);
  transition:opacity .6s ease, transform .6s cubic-bezier(.5,0,.75,0);
}

/* ================= 轻提示 toast ================= */
.toast{
  position:fixed; left:50%; bottom:34px; z-index:300;
  transform:translate(-50%,16px); opacity:0;
  background:rgba(16,18,22,.94); color:#f5f7fa;
  font-size:.8rem; letter-spacing:.04em; white-space:nowrap;
  padding:10px 18px; border-radius:999px;
  box-shadow:0 8px 24px rgba(0,0,0,.3);
  pointer-events:none;
  transition:opacity .35s ease, transform .35s cubic-bezier(.34,1.3,.4,1);
}
.toast.show{ opacity:1; transform:translate(-50%,0); }

/* 无障碍：系统要求减少动态效果时，关闭循环/位移动画并立即呈现内容。 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior:auto !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  section { opacity:1; transform:none; }
  .ad-track { animation:none !important; }
}