:root{
  --ink:#2b3a3f;
  --ink-deep:#1c282c;
  --paper:#f5efe2;
  --cinnabar:#b3422e;
  --gold:#b89a5e;
}

*{margin:0;padding:0;box-sizing:border-box;}

html,body{
  height:100%;overflow:hidden;
  font-family:"华文楷体","STKaiti","楷体","KaiTi","华文行楷","STXingkai","演示流云楷","STSong","SimSun","Noto Serif SC",serif;
  background:#14100b;color:var(--ink);
  -webkit-font-smoothing:antialiased;
  user-select:none;
}

/* ========== 卷轴视口（可平移缩放） ========== */
.viewport{
  position:fixed;inset:0;overflow:hidden;
  cursor:grab;
  touch-action:none;
}
.viewport.dragging{cursor:grabbing;}

.stage{
  position:absolute;top:0;left:0;
  transform-origin:0 0;
  will-change:transform;
}

.scroll-painting{
  display:block;
  width:100vw;          /* 宽度铺满视口，高度按比例由 JS cover 缩放 */
  height:auto;
  -webkit-user-drag:none;
  user-select:none;
}

/* ========== 开卷动画（两扇遮罩门从中间向两侧推开） ========== */
.scroll-painting{
  /* 开卷阶段：画卷居中显示，不用 clip-path */
}

.unroll-mask{
  position:fixed;top:0;bottom:0;width:50%;z-index:10;pointer-events:none;
  background:#14100b;
}
.unroll-mask.left{
  left:0;
  animation: maskLeft 2.6s cubic-bezier(.7,0,.3,1) forwards;
}
.unroll-mask.right{
  right:0;
  animation: maskRight 2.6s cubic-bezier(.7,0,.3,1) forwards;
}
@keyframes maskLeft{
  0%{ transform:translateX(0); }
  100%{ transform:translateX(-100%); }
}
@keyframes maskRight{
  0%{ transform:translateX(0); }
  100%{ transform:translateX(100%); }
}

/* ========== 可点风物热区 ========== */
.spot{
  position:absolute;
  width:0;height:0;
  border:none;background:transparent;
  cursor:pointer;z-index:5;
  transform:translate(-50%,-50%);
  opacity:0;
  animation: spotIn .8s ease 1.8s forwards;
}
@keyframes spotIn{ to{ opacity:1; } }
.spot-ring{
  position:absolute;left:-26px;top:-26px;
  width:52px;height:52px;border-radius:50%;
  border:2px solid rgba(184,154,94,.9);
  box-shadow:0 0 0 0 rgba(184,154,94,.4);
  animation:pulse 2.4s ease-out infinite;
}
.spot-ring::after{
  content:"";position:absolute;inset:12px;border-radius:50%;
  background:radial-gradient(circle, rgba(255,244,214,.95), rgba(184,154,94,.4));
  transition:transform .3s ease;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(184,154,94,.45)}
  70%{box-shadow:0 0 0 30px rgba(184,154,94,0)}
  100%{box-shadow:0 0 0 0 rgba(184,154,94,0)}
}
.spot-name{
  position:absolute;left:0;top:30px;transform:translateX(-50%);
  white-space:nowrap;
  font-family:"华文楷体","STKaiti","楷体","KaiTi","华文行楷","STXingkai","演示流云楷","STSong","SimSun",serif;
  font-size:17px;letter-spacing:.28em;color:#f5efe2;font-weight:600;
  padding:5px 14px;border-radius:4px;
  background:rgba(28,40,44,.55);
  opacity:0;transition:opacity .3s ease;
  pointer-events:none;
}
.spot:hover .spot-ring{animation-play-state:paused;border-color:var(--cinnabar);}
.spot:hover .spot-ring::after{transform:scale(1.6);}
.spot:hover .spot-name{opacity:1;}

/* ========== 轴杆（卷轴轴头） ========== */
.rod{
  position:fixed;top:0;bottom:0;width:42px;z-index:20;pointer-events:none;
  background:linear-gradient(to right,
    #241505 0%,#3d2710 8%,#5c3a1a 22%,#8a5a2e 40%,#9c6a38 50%,#8a5a2e 60%,#5c3a1a 78%,#3d2710 92%,#241505 100%);
  box-shadow:
    inset 0 0 14px rgba(0,0,0,.55),
    inset 0 0 2px rgba(255,220,160,.25),
    0 0 30px rgba(0,0,0,.7);
  border-radius:8px;
}
/* 木纹细纹 */
.rod::before{
  content:"";position:absolute;inset:6px 7px;
  border-radius:6px;
  background:repeating-linear-gradient(
    90deg,
    rgba(0,0,0,.0) 0px, rgba(0,0,0,.0) 3px,
    rgba(60,35,12,.25) 3px, rgba(60,35,12,.25) 4px,
    rgba(0,0,0,0) 4px, rgba(0,0,0,0) 7px);
  opacity:.55;
}
/* 两端金色轴头（帽） */
.rod::after{
  content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:30px;height:44px;border-radius:10px;
  background:linear-gradient(to bottom,#f3d78b,#b89a5e 45%,#8a6a35);
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,.5),
    inset 0 -3px 5px rgba(0,0,0,.35),
    0 3px 8px rgba(0,0,0,.5);
}
.rod-cap-bottom{
  content:"";position:fixed;width:30px;height:44px;border-radius:10px;z-index:21;pointer-events:none;
  background:linear-gradient(to bottom,#f3d78b,#b89a5e 45%,#8a6a35);
  box-shadow:inset 0 2px 3px rgba(255,255,255,.5),inset 0 -3px 5px rgba(0,0,0,.35),0 3px 8px rgba(0,0,0,.5);
}
.rod-left{left:0;}
.rod-left::after{top:0;}
.rod-right{right:0;}
.rod-right::after{top:0;}

/* 开卷时轴杆从中间向两侧滑开（与遮罩门同步） */
.rod-left{
  animation: rodLeft 2.6s cubic-bezier(.7,0,.3,1) forwards;
}
.rod-right{
  animation: rodRight 2.6s cubic-bezier(.7,0,.3,1) forwards;
}
@keyframes rodLeft{
  0%{ transform:translateX(calc(50vw - 21px)); }
  100%{ transform:translateX(0); }
}
@keyframes rodRight{
  0%{ transform:translateX(calc(-50vw + 21px)); }
  100%{ transform:translateX(0); }
}

/* 底部轴头帽（用独立元素定位到底部） */
.rod-cap{
  position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:30px;height:44px;border-radius:10px;
  background:linear-gradient(to bottom,#8a6a35,#b89a5e 55%,#f3d78b);
  box-shadow:
    inset 0 -2px 3px rgba(255,255,255,.5),
    inset 0 3px 5px rgba(0,0,0,.35),
    0 3px 8px rgba(0,0,0,.5);
}

/* ========== 提示 ========== */
.hint{
  position:fixed;bottom:34px;left:50%;transform:translateX(-50%);
  z-index:15;font-size:15px;letter-spacing:.3em;color:var(--gold);font-weight:600;
  font-family:"华文楷体","STKaiti","楷体","KaiTi","华文行楷","STXingkai","演示流云楷","STSong","SimSun",serif;
  text-shadow:0 1px 4px rgba(0,0,0,.6);
  animation:hintfade 3s ease-in-out infinite;pointer-events:none;
  background:rgba(20,16,11,.4);padding:10px 22px;border-radius:999px;
}
@keyframes hintfade{0%,100%{opacity:.4}50%{opacity:.95}}

/* ========== 动效层（云海、波光、船摇） ========== */
.fx{
  position:absolute;pointer-events:none;z-index:4;
}
/* 飘移的云雾层（两片，左右循环） */
.fx-cloud{
  position:absolute;top:0;height:100%;width:220%;mix-blend-mode:screen;opacity:.65;
  background:
    radial-gradient(ellipse 30% 16% at 18% 24%, rgba(255,244,220,.5), transparent 70%),
    radial-gradient(ellipse 26% 13% at 46% 15%, rgba(255,248,228,.42), transparent 70%),
    radial-gradient(ellipse 32% 18% at 70% 28%, rgba(255,244,220,.45), transparent 70%),
    radial-gradient(ellipse 24% 12% at 88% 19%, rgba(255,248,228,.35), transparent 70%);
  filter:blur(10px);
}
.fx-cloud.c1{left:-30%;animation:cloudmove 26s linear infinite;}
.fx-cloud.c2{left:-30%;animation:cloudmove 40s linear infinite;opacity:.5;transform:translateY(7%);}
@keyframes cloudmove{
  0%{transform:translateX(0);}
  100%{transform:translateX(-50%);}
}
/* 水面波光（淡金细浪，缓慢游动） */
.fx-water{
  position:absolute;height:100%;width:200%;left:0;mix-blend-mode:screen;opacity:.55;
  background:
    repeating-linear-gradient(94deg,
      transparent 0px, transparent 44px,
      rgba(255,222,140,.22) 44px, rgba(255,222,140,.22) 46px,
      transparent 46px, transparent 88px);
  filter:blur(1px);
  animation:watermove 9s linear infinite;
}
@keyframes watermove{
  0%{transform:translateX(0);}
  100%{transform:translateX(-88px);}
}
/* 船/风物轻摇（整体微弱呼吸） */
.fx-breathe{
  position:absolute;inset:0;mix-blend-mode:normal;opacity:1;
  animation:breathe 6s ease-in-out infinite;
  transform-origin:50% 82%;
}
@keyframes breathe{
  0%,100%{transform:translateY(0) rotate(0deg);}
  50%{transform:translateY(-6px) rotate(.18deg);}
}
/* 动态元素挂载层（你画的透明 PNG 元素都放这里） */
.fx-actors{
  position:absolute;inset:0;z-index:5;pointer-events:none;
}
.fx-actor{
  position:absolute;will-change:transform;
}

/* ===== 飞鸟（三帧扇翅 + JS 驱动的随机飞行） ===== */
.actor-bird{
  position:absolute;left:0;opacity:0;
  will-change:transform;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.25));
  /* 飞行由 JS 通过 animation 时长/延迟 + 内联 transform 驱动 */
}
/* 三帧翅膀叠加在同一位置，用 opacity 循环切换形成扇翅 */
.actor-bird .bird-wing{
  position:absolute;inset:0;
  background-size:contain;background-repeat:no-repeat;background-position:center;
  opacity:0;
}
.actor-bird .w1{background-image:url('assets_web/bird_1.png');animation:wing1 .5s step-end infinite;}
.actor-bird .w2{background-image:url('assets_web/bird_2.png');animation:wing2 .5s step-end infinite;}
.actor-bird .w3{background-image:url('assets_web/bird_3.png');animation:wing3 .5s step-end infinite;}
/* 每帧在扇翅周期中各显示 1/3 时间，依次交替 */
@keyframes wing1{
  0%{opacity:1;} 33.33%{opacity:1;} 33.34%{opacity:0;} 100%{opacity:0;}
}
@keyframes wing2{
  0%{opacity:0;} 33.33%{opacity:0;} 33.34%{opacity:1;} 66.66%{opacity:1;} 66.67%{opacity:0;} 100%{opacity:0;}
}
@keyframes wing3{
  0%{opacity:0;} 66.66%{opacity:0;} 66.67%{opacity:1;} 100%{opacity:1;}
}

/* ===== 鱼（三帧跃水 + 定点跃起循环） ===== */
.actor-fish{
  position:absolute;left:0;opacity:0;
  will-change:transform;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.2));
}
.actor-fish .fish-frame{
  position:absolute;inset:0;
  background-size:contain;background-repeat:no-repeat;background-position:center;
  opacity:0;
}
.actor-fish .f1{background-image:url('assets_web/fish_1.png');animation:fish1 .9s step-end infinite;}
.actor-fish .f2{background-image:url('assets_web/fish_2.png');animation:fish2 .9s step-end infinite;}
.actor-fish .f3{background-image:url('assets_web/fish_3.png');animation:fish3 .9s step-end infinite;}
@keyframes fish1{
  0%{opacity:1;} 33.33%{opacity:1;} 33.34%{opacity:0;} 100%{opacity:0;}
}
@keyframes fish2{
  0%{opacity:0;} 33.33%{opacity:0;} 33.34%{opacity:1;} 66.66%{opacity:1;} 66.67%{opacity:0;} 100%{opacity:0;}
}
@keyframes fish3{
  0%{opacity:0;} 66.66%{opacity:0;} 66.67%{opacity:1;} 100%{opacity:1;}
}

/* ========== 详情页 ========== */
.detail{
  position:fixed;inset:0;z-index:100;
  opacity:0;pointer-events:none;transform:scale(1.5);
  transition:opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1);
  overflow:hidden;
}
.detail.open{opacity:1;pointer-events:auto;transform:scale(1);}
.detail-bg{
  position:absolute;inset:0;background-size:cover;background-position:center;
  transform:scale(1.08);filter:brightness(.9);
}
.detail-scrim{
  position:absolute;inset:0;
  background:linear-gradient(to bottom, rgba(20,16,11,.3), rgba(20,16,11,.55) 55%, rgba(20,16,11,.82));
}
.back{
  position:absolute;top:28px;left:30px;z-index:5;
  font-family:inherit;font-size:16px;letter-spacing:.12em;
  padding:11px 22px;border-radius:999px;cursor:pointer;
  border:1px solid rgba(255,255,255,.35);
  background:rgba(0,0,0,.28);color:#f5efe2;transition:all .3s ease;
}
.back:hover{background:rgba(179,66,46,.8);border-color:transparent;}
.detail-content{
  position:absolute;inset:0;z-index:4;padding:120px 7vw 60px;
  overflow-y:auto;color:#f5efe2;
}
.detail-content::-webkit-scrollbar{width:6px;}
.detail-content::-webkit-scrollbar-thumb{background:rgba(184,154,94,.6);border-radius:3px;}

.d-head{max-width:860px;margin-bottom:34px;position:relative;}
.d-no{font-size:60px;color:rgba(184,154,94,.9);font-weight:700;font-family:"华文楷体","STKaiti","楷体","KaiTi","华文行楷","STXingkai","演示流云楷","STSong","SimSun",serif;}
.d-title{font-size:clamp(30px,4.4vw,52px);letter-spacing:.1em;font-weight:400;margin-top:4px;text-shadow:0 2px 12px rgba(0,0,0,.5);font-family:"华文楷体","STKaiti","楷体","KaiTi","华文行楷","STXingkai","演示流云楷","STSong","SimSun",serif;}
.d-verse{position:relative;margin-top:22px;padding-left:20px;font-size:clamp(15px,1.8vw,20px);line-height:2.2;letter-spacing:.12em;color:#eee6d4;font-family:"华文行楷","STXingkai","演示流云楷","华文楷体","STKaiti","楷体","KaiTi",serif;text-shadow:0 1px 8px rgba(0,0,0,.45);}
.d-verse::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:3px;background:linear-gradient(180deg,transparent,rgba(184,154,94,.85),transparent);border-radius:2px;}
.d-seal{position:absolute;right:0;top:-6px;width:52px;height:52px;line-height:52px;text-align:center;font-size:20px;letter-spacing:0;color:#fff;font-family:"华文行楷","STXingkai","演示流云楷","华文楷体","楷体",serif;background:linear-gradient(135deg,#a8322c,#7c1f1a);border-radius:6px;box-shadow:0 3px 10px rgba(0,0,0,.4);transform:rotate(4deg);opacity:.92;}
.d-verse-img{position:absolute;right:70px;top:6px;width:96px;height:96px;border-radius:50%;background-size:cover;background-position:center;opacity:.88;box-shadow:0 4px 16px rgba(0,0,0,.35);pointer-events:none;}

.d-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px;max-width:1120px;}
.d-card{
  background:rgba(20,16,11,.45);border:1px solid rgba(255,255,255,.14);
  border-radius:10px;overflow:hidden;cursor:pointer;
  transition:transform .35s ease, box-shadow .35s ease;
  display:flex;flex-direction:column;
}
.d-card:hover{transform:translateY(-6px);box-shadow:0 16px 40px rgba(0,0,0,.5);}
.d-card-img{height:170px;background-size:cover;background-position:center;flex-shrink:0;}
.d-card-title{font-size:18px;letter-spacing:.06em;padding:16px 18px 6px;font-weight:600;color:#f5efe2;}
.d-card-desc{font-size:14px;line-height:1.9;padding:0 18px 18px;color:#d8ceb8;flex:1;}
.d-card-links{display:flex;flex-wrap:wrap;gap:8px;padding:0 18px 16px;}
.d-card-link{
  border:none;background:rgba(184,154,94,.14);color:#e8d5a8;font-size:12px;letter-spacing:.05em;
  padding:6px 12px;border-radius:20px;cursor:pointer;font-family:inherit;
  border:1px solid rgba(184,154,94,.35);transition:background .25s ease,color .25s ease;
}
.d-card-link:hover{background:rgba(184,154,94,.32);color:#fff;}

/* 知识卡弹层 */
.modal{
  position:fixed;inset:0;z-index:120;background:rgba(10,8,5,.6);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .3s ease;
}
.modal.show{opacity:1;pointer-events:auto;}
.modal-card{
  position:relative;width:min(520px,90vw);background:var(--paper);border-radius:8px;
  overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.5);transform:translateY(14px);transition:transform .3s ease;
}
.modal.show .modal-card{transform:none;}
.modal-close{
  position:absolute;top:12px;right:16px;z-index:3;border:none;background:rgba(0,0,0,.3);color:#fff;
  width:32px;height:32px;border-radius:50%;font-size:22px;line-height:1;cursor:pointer;
}
.modal-img{height:240px;background-size:cover;background-position:center;}
.modal-title{font-size:22px;color:var(--cinnabar);font-weight:600;letter-spacing:.08em;padding:20px 24px 10px;}
.modal-body{font-size:16px;line-height:2;color:var(--ink);padding:0 24px 28px;white-space:pre-line;max-height:46vh;overflow-y:auto;}
.modal-body::-webkit-scrollbar{width:6px;}
.modal-body::-webkit-scrollbar-thumb{background:rgba(179,66,46,.35);border-radius:3px;}

/* ========== 全局左下角 Logo ========== */
.global-logo{
  position:fixed;left:72px;bottom:24px;z-index:70;
  width:min(120px,12vw);
  filter:drop-shadow(0 4px 14px rgba(0,0,0,.55));
  pointer-events:none;
  opacity:0;animation:navin 1s ease 2.8s forwards;
  transition:opacity .35s ease;
}

/* ========== 顶部导航栏 ========== */
.topnav{
  position:fixed;top:20px;right:120px;left:auto;transform:none;
  z-index:40;display:flex;gap:12px;
  opacity:0;animation:navin 1s ease 2.8s forwards;
  pointer-events:none;
}
.topnav.show{opacity:1;pointer-events:auto;}
@keyframes navin{ to{ opacity:1; } }
.nav-btn{
  font-family:"华文楷体","STKaiti","楷体","KaiTi","华文行楷","STXingkai","演示流云楷","STSong","SimSun",serif;
  font-size:16px;letter-spacing:.18em;color:#f5efe2;font-weight:400;
  padding:8px 22px;border-radius:999px;cursor:pointer;
  border:1px solid rgba(184,154,94,.5);
  background:rgba(20,16,11,.55);backdrop-filter:blur(4px);
  transition:all .3s ease;
  display:inline-flex;align-items:center;gap:8px;
}
.nav-btn .nav-icon{
  width:22px;height:22px;object-fit:contain;border-radius:50%;
}
/* 纯图标入口按钮 */
.nav-btn-icon{
  width:64px;height:64px;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;
  border:none;background:transparent;
  box-shadow:0 6px 22px rgba(0,0,0,.45);
}
.nav-btn-icon .nav-icon{
  width:64px;height:64px;object-fit:contain;border-radius:50%;
  display:block;
}
.nav-btn:hover{background:rgba(179,66,46,.75);border-color:transparent;transform:translateY(-2px);}

/* ========== 名人列传 二级页 ========== */
.page{
  position:fixed;inset:0;z-index:60;
  opacity:0;pointer-events:none;transition:opacity .5s ease;
}
.page.open{opacity:1;pointer-events:auto;}

.mr-layer{
  position:absolute;inset:0;
  opacity:0;pointer-events:none;transition:opacity .5s ease;
}
.mr-layer.active{opacity:1;}
/* 仅当整个名人列传页打开时，激活的层级才可交互 */
.page.open .mr-layer.active{pointer-events:auto;}

.mr-era-bg{
  position:absolute;inset:0;background-size:cover;background-position:center;
  transform:scale(1.05);
}
.mr-era-scrim{
  position:absolute;inset:0;
  background:linear-gradient(to bottom, rgba(20,16,11,.15), rgba(20,16,11,.45) 70%, rgba(20,16,11,.7));
}

.mr-back-to-scroll{
  position:absolute;top:22px;left:26px;z-index:30;
  font-family:inherit;font-size:14px;letter-spacing:.12em;
  padding:9px 20px;border-radius:999px;cursor:pointer;
  border:1px solid rgba(255,255,255,.35);
  background:rgba(0,0,0,.45);color:#f5efe2;transition:all .3s ease;
}
.mr-back-to-scroll:hover{background:rgba(179,66,46,.8);border-color:transparent;}
/* 详情弹窗内的返回按钮（卡片右上角，sticky 跟随滚动） */
.mr-back-modal{
  position:sticky;top:0;left:auto;float:right;z-index:40;
  margin:-6px -16px 8px 12px;
}

.mr-era-title{
  position:absolute;top:6%;left:50%;transform:translateX(-50%);z-index:5;
  width:max-content;max-width:92vw;text-align:center;white-space:nowrap;
  font-family:"华文行楷","STXingkai","华文楷体","STKaiti","楷体","KaiTi","演示流云楷",serif;
  font-size:clamp(38px,6vw,64px);letter-spacing:.08em;color:#f7f0df;font-weight:400;
  text-shadow:0 3px 10px rgba(0,0,0,.85), 0 0 30px rgba(0,0,0,.5);
}
.mr-era-sub{
  display:none;
}
/* 副标题书法图（放右侧） */
.mr-era-subimg{
  position:absolute;top:16%;right:4%;z-index:5;
  width:min(340px,30vw);
  filter:drop-shadow(0 3px 12px rgba(0,0,0,.6));
  pointer-events:none;
}

/* 时代热键 */
.mr-eras{position:absolute;inset:0;z-index:6;}
.mr-era-btn{
  position:absolute;transform:translate(-50%,-50%);
  background:transparent;border:none;cursor:pointer;padding:0;
}
.mr-era-label{
  display:inline-block;
  font-family:"华文行楷","STXingkai","华文楷体","STKaiti","楷体","KaiTi",serif;
  font-size:21px;letter-spacing:.14em;color:#f7f0df;font-weight:400;
  padding:9px 26px;border-radius:6px;
  background:linear-gradient(180deg, rgba(52,38,22,.82), rgba(38,27,15,.88));
  border:1px solid rgba(214,178,106,.65);
  box-shadow:0 4px 18px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,230,180,.18);
  transition:all .3s ease;
  white-space:nowrap;
  text-shadow:0 1px 4px rgba(0,0,0,.6);
}
.mr-era-btn:hover .mr-era-label{
  background:linear-gradient(180deg, rgba(150,55,36,.9), rgba(120,40,26,.92));
  border-color:#f0cf92;
  box-shadow:0 0 26px rgba(214,178,106,.75);
  transform:scale(1.06);
}

/* 时代名人页 */
.mr-people-title{
  position:absolute;top:13%;left:50%;transform:translateX(-50%);z-index:5;
  width:max-content;max-width:94vw;text-align:center;
  font-family:"华文行楷","STXingkai","华文楷体","STKaiti","楷体","KaiTi","演示流云楷",serif;
  font-size:clamp(30px,4.6vw,50px);letter-spacing:.08em;color:#f7f0df;font-weight:400;
  text-shadow:0 3px 10px rgba(0,0,0,.85), 0 0 30px rgba(0,0,0,.5);
}
.mr-people-grid{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-46%);z-index:6;
  width:min(1080px,88vw);
  display:grid;grid-template-columns:repeat(4,1fr);gap:22px;
}
.mr-person{
  background:linear-gradient(180deg, rgba(40,29,17,.72), rgba(28,20,12,.82));
  border:1px solid rgba(214,178,106,.4);
  border-radius:10px;overflow:hidden;cursor:pointer;
  box-shadow:0 6px 22px rgba(0,0,0,.45);
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.mr-person:hover{transform:translateY(-8px);box-shadow:0 20px 48px rgba(0,0,0,.6);border-color:rgba(214,178,106,.75);}
.mr-person-img{
  height:240px;background-size:cover;background-position:center top;
  border-bottom:1px solid rgba(214,178,106,.25);
}
.mr-person-name{
  font-family:"华文行楷","STXingkai","华文楷体","STKaiti","楷体","KaiTi",serif;
  font-size:22px;letter-spacing:.12em;font-weight:400;color:#f7f0df;
  padding:14px 16px 6px;text-align:center;
  text-shadow:0 1px 4px rgba(0,0,0,.6);
}
.mr-person-tag{
  font-family:"华文楷体","STKaiti","楷体","KaiTi",serif;
  font-size:13px;letter-spacing:.14em;color:#d9bd85;
  padding:0 16px 16px;text-align:center;
}

/* 人物详情弹窗（居中卡片） */
.mr-detail{
  position:absolute;inset:0;z-index:20;
  display:flex;align-items:center;justify-content:center;
  padding:5vh 4vw;
  background:rgba(12,9,6,.68);backdrop-filter:blur(5px);
  opacity:0;pointer-events:none;transition:opacity .45s ease;
}
.mr-detail.active{opacity:1;pointer-events:auto;}
.mr-detail-bg{display:none;}
.mr-detail-scroll{
  position:relative;z-index:5;
  width:min(940px,92vw);height:min(88vh,780px);
  overflow-y:auto;overflow-x:hidden;
  border-radius:14px;
  border:2px solid rgba(200,164,100,.5);
  box-shadow:0 40px 110px rgba(0,0,0,.75), inset 0 0 0 1px rgba(0,0,0,.2);
  padding:40px 48px 48px;
}
/* 卡片背景图（通用青绿山水衬底） */
.mr-detail-bgimg{
  position:absolute;inset:0;z-index:-2;
  background-size:cover;background-position:center;
  filter:brightness(.72) saturate(.92);
}
.mr-detail-scrim{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg, rgba(26,19,12,.88), rgba(20,14,9,.93) 60%, rgba(18,12,8,.95));
}
.mr-detail-scroll::-webkit-scrollbar{width:6px;}
.mr-detail-scroll::-webkit-scrollbar-thumb{background:rgba(200,164,100,.5);border-radius:3px;}

.mr-detail-hero{
  display:flex;align-items:flex-start;gap:34px;
  margin-bottom:28px;
}
.mr-detail-portrait{
  flex-shrink:0;
  width:min(240px,30vw);aspect-ratio:3/4;
  background-size:cover;background-position:center top;
  border-radius:10px;
  border:3px solid rgba(200,164,100,.65);
  box-shadow:0 18px 50px rgba(0,0,0,.6);
}
.mr-detail-head{flex:1;min-width:0;padding-top:4px;}
.mr-detail-name{
  font-family:"华文行楷","STXingkai","华文楷体","STKaiti","楷体","KaiTi","演示流云楷",serif;
  font-size:clamp(38px,4.6vw,54px);letter-spacing:.08em;color:#f7f0df;font-weight:400;
  text-shadow:0 3px 12px rgba(0,0,0,.75);
}
.mr-detail-meta{
  font-family:"华文楷体","STKaiti","楷体","KaiTi",serif;
  font-size:15px;letter-spacing:.06em;color:#d8cbaa;margin-top:12px;line-height:1.9;
  text-shadow:0 1px 4px rgba(0,0,0,.6);
}
.mr-detail-verse{
  font-family:"华文楷体","STKaiti","楷体","KaiTi",serif;
  font-size:16px;letter-spacing:.06em;color:#e6c986;
  margin-top:16px;padding-top:14px;
  border-top:1px solid rgba(200,164,100,.4);
  font-style:italic;line-height:1.9;
  text-shadow:0 1px 4px rgba(0,0,0,.6);
}
/* 人物关键词标签 */
.mr-detail-tags{
  display:flex;flex-wrap:wrap;gap:9px;margin-top:16px;
}
.mr-tag{
  font-family:"华文楷体","STKaiti","楷体","KaiTi",serif;
  font-size:13px;letter-spacing:.12em;color:#f0e2c4;
  padding:5px 14px;border-radius:999px;
  background:rgba(70,48,24,.55);
  border:1px solid rgba(200,164,100,.55);
  text-shadow:0 1px 3px rgba(0,0,0,.6);
  box-shadow:inset 0 1px 0 rgba(255,230,180,.12);
}
.mr-detail-story{
  font-family:"华文楷体","STKaiti","楷体","KaiTi",serif;
  font-size:16.5px;line-height:2.15;letter-spacing:.03em;color:#eee4ce;
}
.mr-detail-story p{margin-bottom:15px;text-indent:2em;text-shadow:0 1px 3px rgba(0,0,0,.5);}
.mr-detail-story .mr-story-heading{
  color:#e6c986;font-weight:400;letter-spacing:.04em;
}

/* ========== 风雅诗词 二级页（复用名人列传视觉语言） ========== */
.sc-layer{
  position:absolute;inset:0;
  opacity:0;pointer-events:none;transition:opacity .5s ease;
}
.sc-layer.active{opacity:1;}
.page.open .sc-layer.active{pointer-events:auto;}

.sc-bg{
  position:absolute;inset:0;background-size:cover;background-position:center;
  transform:scale(1.05);
}
.sc-scrim{
  position:absolute;inset:0;
  background:linear-gradient(to bottom, rgba(20,16,11,.12), rgba(20,16,11,.42) 70%, rgba(20,16,11,.68));
}
.sc-back-to-scroll{
  position:absolute;top:22px;left:26px;z-index:30;
  font-family:inherit;font-size:14px;letter-spacing:.12em;
  padding:9px 20px;border-radius:999px;cursor:pointer;
  border:1px solid rgba(255,255,255,.35);
  background:rgba(0,0,0,.45);color:#f5efe2;transition:all .3s ease;
}
.sc-back-to-scroll:hover{background:rgba(179,66,46,.8);border-color:transparent;}
.sc-back-modal{
  position:absolute;top:18px;right:20px;left:auto;z-index:40;
}

.sc-title{
  position:absolute;top:6%;left:50%;transform:translateX(-50%);z-index:5;
  width:max-content;max-width:92vw;text-align:center;white-space:nowrap;
  font-family:"华文行楷","STXingkai","华文楷体","STKaiti","楷体","KaiTi","演示流云楷",serif;
  font-size:clamp(38px,6vw,64px);letter-spacing:.1em;color:#f7f0df;font-weight:400;
  text-shadow:0 3px 10px rgba(0,0,0,.85), 0 0 30px rgba(0,0,0,.5);
}
.sc-sub{
  position:absolute;top:calc(6% + 74px);left:50%;transform:translateX(-50%);z-index:5;
  width:max-content;max-width:90vw;text-align:center;white-space:nowrap;
  font-family:"华文楷体","STKaiti","楷体","KaiTi",serif;
  font-size:clamp(15px,1.9vw,20px);letter-spacing:.28em;color:#e6d3a6;font-weight:400;
  text-shadow:0 2px 6px rgba(0,0,0,.7);
}

/* 思想情感分类热键 */
.sc-cats{position:absolute;inset:0;z-index:6;}
.sc-cat-btn{
  position:absolute;transform:translate(-50%,-50%);
  background:transparent;border:none;cursor:pointer;padding:0;
}
.sc-cat-label{
  display:inline-block;
  font-family:"华文行楷","STXingkai","华文楷体","STKaiti","楷体","KaiTi",serif;
  font-size:21px;letter-spacing:.14em;color:#f7f0df;font-weight:400;
  padding:9px 26px;border-radius:6px;
  background:linear-gradient(180deg, rgba(52,38,22,.82), rgba(38,27,15,.88));
  border:1px solid rgba(214,178,106,.65);
  box-shadow:0 4px 18px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,230,180,.18);
  transition:all .3s ease;
  white-space:nowrap;
  text-shadow:0 1px 4px rgba(0,0,0,.6);
}
.sc-cat-btn:hover .sc-cat-label{
  background:linear-gradient(180deg, rgba(150,55,36,.9), rgba(120,40,26,.92));
  border-color:#f0cf92;
  box-shadow:0 0 26px rgba(214,178,106,.75);
  transform:scale(1.06);
}

/* 诗词列表页 */
.sc-list-title{
  position:absolute;top:13%;left:50%;transform:translateX(-50%);z-index:5;
  width:max-content;max-width:94vw;text-align:center;
  font-family:"华文行楷","STXingkai","华文楷体","STKaiti","楷体","KaiTi","演示流云楷",serif;
  font-size:clamp(30px,4.6vw,50px);letter-spacing:.08em;color:#f7f0df;font-weight:400;
  text-shadow:0 3px 10px rgba(0,0,0,.85), 0 0 30px rgba(0,0,0,.5);
}
.sc-list-grid{
  position:absolute;left:50%;top:53%;transform:translate(-50%,-50%);z-index:6;
  width:min(1080px,88vw);
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
}
.sc-poem-card{
  background:linear-gradient(180deg, rgba(40,29,17,.72), rgba(28,20,12,.82));
  border:1px solid rgba(214,178,106,.4);
  border-radius:10px;overflow:hidden;cursor:pointer;
  box-shadow:0 6px 22px rgba(0,0,0,.45);
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
  padding:16px 18px 14px;
}
.sc-poem-card:hover{transform:translateY(-8px);box-shadow:0 20px 48px rgba(0,0,0,.6);border-color:rgba(214,178,106,.75);}
.sc-poem-title{
  font-family:"华文行楷","STXingkai","华文楷体","STKaiti","楷体","KaiTi",serif;
  font-size:21px;letter-spacing:.08em;font-weight:400;color:#f7f0df;
  margin-bottom:6px;
  text-shadow:0 1px 4px rgba(0,0,0,.6);
}
.sc-poem-author{
  font-family:"华文楷体","STKaiti","楷体","KaiTi",serif;
  font-size:13px;letter-spacing:.12em;color:#d9bd85;margin-bottom:8px;
}
.sc-poem-excerpt{
  font-family:"华文楷体","STKaiti","楷体","KaiTi",serif;
  font-size:14px;line-height:1.75;letter-spacing:.04em;color:#eee4ce;
  text-shadow:0 1px 3px rgba(0,0,0,.5);
}

/* 诗词详情弹窗（居中卡片） */
.sc-detail{
  position:absolute;inset:0;z-index:20;
  display:flex;align-items:center;justify-content:center;
  padding:5vh 4vw;
  background:rgba(12,9,6,.68);backdrop-filter:blur(5px);
  opacity:0;pointer-events:none;transition:opacity .45s ease;
}
.sc-detail.active{opacity:1;pointer-events:auto;}
.sc-detail-scroll{
  position:relative;z-index:5;
  width:min(860px,92vw);height:min(86vh,760px);
  overflow-y:auto;overflow-x:hidden;
  border-radius:14px;
  border:2px solid rgba(200,164,100,.5);
  box-shadow:0 40px 110px rgba(0,0,0,.75), inset 0 0 0 1px rgba(0,0,0,.2);
  padding:40px 48px 48px;
}
.sc-detail-bgimg{
  position:absolute;inset:0;z-index:-2;
  background-size:cover;background-position:center;
  filter:brightness(.72) saturate(.92);
}
.sc-detail-scrim{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg, rgba(26,19,12,.88), rgba(20,14,9,.93) 60%, rgba(18,12,8,.95));
}
.sc-detail-scroll::-webkit-scrollbar{width:6px;}
.sc-detail-scroll::-webkit-scrollbar-thumb{background:rgba(200,164,100,.5);border-radius:3px;}

.sc-detail-title{
  font-family:"华文行楷","STXingkai","华文楷体","STKaiti","楷体","KaiTi",serif;
  font-size:clamp(26px,3.4vw,38px);letter-spacing:.08em;color:#f7f0df;font-weight:400;
  text-align:center;margin-bottom:6px;
  text-shadow:0 2px 8px rgba(0,0,0,.6);
}
.sc-detail-author{
  font-family:"华文楷体","STKaiti","楷体","KaiTi",serif;
  font-size:16px;letter-spacing:.2em;color:#e6c986;text-align:center;margin-bottom:4px;
}
.sc-detail-dynasty{
  font-family:"华文楷体","STKaiti","楷体","KaiTi",serif;
  font-size:13px;letter-spacing:.3em;color:#c9b489;text-align:center;margin-bottom:24px;
}
.sc-detail-poem{
  font-family:"华文楷体","STKaiti","楷体","KaiTi",serif;
  font-size:19px;line-height:2.15;letter-spacing:.05em;color:#f3e9d2;
  text-align:center;margin-bottom:26px;
  text-shadow:0 1px 4px rgba(0,0,0,.5);
}
.sc-detail-poem .line{display:block;}
.sc-detail-note{
  font-family:"华文楷体","STKaiti","楷体","KaiTi",serif;
  font-size:15.5px;line-height:2;letter-spacing:.03em;color:#eee4ce;
  text-indent:2em;
  text-shadow:0 1px 3px rgba(0,0,0,.5);
}
.sc-detail-note p{margin-bottom:12px;}
.sc-detail-note .sc-trans p{
  font-size:14.5px;color:#d8cbaa;line-height:1.9;
  text-indent:0;margin-bottom:8px;
}
.sc-detail-note .sc-note-h{
  font-family:"华文行楷","STXingkai","华文楷体","STKaiti","楷体","KaiTi",serif;
  font-size:16px;letter-spacing:.12em;color:#e6c986;font-weight:400;
  margin:22px 0 8px;text-indent:0;
  display:flex;align-items:center;gap:10px;
}
.sc-detail-note .sc-note-h::before{
  content:'';display:inline-block;width:14px;height:1px;
  background:linear-gradient(90deg, transparent, #c9a96a);
}
.sc-detail-note .sc-note-h:first-child{margin-top:0;}

/* ========== 安徽发展历程 二级页（复用诗词视觉语言） ========== */
.fz-layer{
  position:absolute;inset:0;
  opacity:0;pointer-events:none;transition:opacity .5s ease;
}
.fz-layer.active{opacity:1;}
.page.open .fz-layer.active{pointer-events:auto;}

.fz-bg{
  position:absolute;inset:0;background-size:cover;background-position:center;
  transform:scale(1.05);
}
.fz-scrim{
  position:absolute;inset:0;
  background:linear-gradient(to bottom, rgba(20,16,11,.12), rgba(20,16,11,.42) 70%, rgba(20,16,11,.68));
}
.fz-back-to-scroll{
  position:absolute;top:22px;left:26px;z-index:30;
  font-family:inherit;font-size:14px;letter-spacing:.12em;
  padding:9px 20px;border-radius:999px;cursor:pointer;
  border:1px solid rgba(255,255,255,.35);
  background:rgba(0,0,0,.45);color:#f5efe2;transition:all .3s ease;
}
.fz-back-to-scroll:hover{background:rgba(179,66,46,.8);border-color:transparent;}
.fz-back-modal{
  position:absolute;top:18px;right:20px;left:auto;z-index:40;
}

.fz-title{
  position:absolute;top:7%;right:5%;left:auto;transform:none;z-index:5;
  width:max-content;max-width:40vw;text-align:right;
  font-family:"华文行楷","STXingkai","华文楷体","STKaiti","楷体","KaiTi","演示流云楷",serif;
  font-size:clamp(34px,5vw,56px);letter-spacing:.12em;color:#f7f0df;font-weight:400;
  text-shadow:0 3px 10px rgba(0,0,0,.85), 0 0 30px rgba(0,0,0,.5);
}

/* 7 个节点热键 */
.fz-nodes{position:absolute;inset:0;z-index:6;}
.fz-node-btn{
  position:absolute;transform:translate(-50%,-50%);
  background:transparent;border:none;cursor:pointer;padding:0;
}
.fz-node-dot{
  position:relative;
  display:flex;flex-direction:column;align-items:center;gap:6px;
}
/* 光晕：独立径向渐变圆盘，垫在图标下方，不作用于 PNG 避免脏边 */
.fz-node-halo{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle, rgba(240,207,146,.5) 0%, rgba(214,178,106,.22) 42%, rgba(214,178,106,0) 70%);
  pointer-events:none;
  animation:fzHalo 3s ease-in-out infinite;
}
@keyframes fzHalo{
  0%,100%{ opacity:.55; transform:translate(-50%,-50%) scale(1); }
  50%{ opacity:.95; transform:translate(-50%,-50%) scale(1.15); }
}
.fz-node-icon{
  position:relative;
  width:144px;height:144px;border-radius:18px;object-fit:contain;
  border:none;
  background:transparent;
  box-shadow:none;
  filter:none;
  transition:all .3s ease;
}
.fz-node-icon.empty{
  display:flex;align-items:center;justify-content:center;
  font-family:"华文行楷","STXingkai","华文楷体","STKaiti","楷体","KaiTi",serif;
  font-size:22px;color:#e6c986;
}
.fz-node-label{
  position:relative;
  font-family:"华文楷体","STKaiti","楷体","KaiTi",serif;
  font-size:17px;letter-spacing:.14em;color:#f7f0df;font-weight:400;
  padding:2px 8px;border-radius:6px;
  background:none;
  border:none;
  text-shadow:0 2px 8px rgba(0,0,0,.85), 0 0 14px rgba(0,0,0,.5);
  white-space:nowrap;
  transition:all .3s ease;
}
.fz-node-btn:hover .fz-node-icon{
  transform:scale(1.1);
}
.fz-node-btn:hover .fz-node-label{
  color:#f0cf92;
  transform:scale(1.06);
}

/* 时期详情弹窗（居中卡片） */
.fz-detail{
  position:absolute;inset:0;z-index:20;
  display:flex;align-items:center;justify-content:center;
  padding:5vh 4vw;
  background:rgba(12,9,6,.68);backdrop-filter:blur(5px);
  opacity:0;pointer-events:none;transition:opacity .45s ease;
}
.fz-detail.active{opacity:1;pointer-events:auto;}
.fz-detail-scroll{
  position:relative;z-index:5;
  width:min(820px,92vw);height:min(84vh,720px);
  overflow-y:auto;overflow-x:hidden;
  border-radius:14px;
  border:2px solid rgba(200,164,100,.5);
  box-shadow:0 40px 110px rgba(0,0,0,.75), inset 0 0 0 1px rgba(0,0,0,.2);
  padding:40px 48px 48px;
}
.fz-detail-bgimg{
  position:absolute;inset:0;z-index:-2;
  background-size:cover;background-position:center;
  filter:brightness(.72) saturate(.92);
}
.fz-detail-scrim{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg, rgba(26,19,12,.88), rgba(20,14,9,.93) 60%, rgba(18,12,8,.95));
}
.fz-detail-scroll::-webkit-scrollbar{width:6px;}
.fz-detail-scroll::-webkit-scrollbar-thumb{background:rgba(200,164,100,.5);border-radius:3px;}

.fz-detail-name{
  font-family:"华文行楷","STXingkai","华文楷体","STKaiti","楷体","KaiTi",serif;
  font-size:clamp(28px,3.6vw,42px);letter-spacing:.1em;color:#f7f0df;font-weight:400;
  text-align:center;margin-bottom:8px;
  text-shadow:0 2px 8px rgba(0,0,0,.6);
}
.fz-detail-verse{
  position:relative;
  font-family:"华文行楷","STXingkai","演示流云楷","华文楷体","STKaiti","楷体","KaiTi",serif;
  font-size:clamp(17px,2vw,22px);letter-spacing:.14em;color:#e6c986;text-align:center;
  margin:0 auto 22px;padding:0 12px;line-height:1.9;
  text-shadow:0 1px 6px rgba(0,0,0,.55);
}
.fz-detail-verse::before,
.fz-detail-verse::after{
  content:'';display:block;width:72px;height:1px;margin:10px auto;
  background:linear-gradient(90deg,transparent,rgba(230,201,134,.7),transparent);
}
.fz-detail-time{
  font-family:"华文楷体","STKaiti","楷体","KaiTi",serif;
  font-size:15px;letter-spacing:.24em;color:#e6c986;text-align:center;margin-bottom:8px;
}
.fz-detail-summary{
  font-family:"华文楷体","STKaiti","楷体","KaiTi",serif;
  font-size:14px;letter-spacing:.14em;color:#c9b489;text-align:center;margin-bottom:26px;
}
.fz-detail-events{
  font-family:"华文楷体","STKaiti","楷体","KaiTi",serif;
  font-size:15.5px;line-height:2;letter-spacing:.03em;color:#eee4ce;
  text-shadow:0 1px 3px rgba(0,0,0,.5);
}
.fz-detail-events .fz-event{
  position:relative;padding-left:22px;margin-bottom:14px;
}
.fz-detail-events .fz-event .fz-event-year{
  font-family:"华文楷体","STKaiti","楷体","KaiTi",serif;
  color:#e6c986;letter-spacing:.05em;margin-right:6px;
  font-weight:400;
}
.fz-detail-events .fz-event::before{
  content:'';position:absolute;left:0;top:.6em;
  width:8px;height:8px;border-radius:50%;
  background:radial-gradient(circle, #e6c986, #b3422e);
}
.fz-detail-meaning{
  margin-top:22px;padding-top:18px;
  border-top:1px solid rgba(200,164,100,.35);
  font-family:"华文楷体","STKaiti","楷体","KaiTi",serif;
  font-size:15px;line-height:2;letter-spacing:.03em;color:#d8cbaa;
  text-indent:2em;
  text-shadow:0 1px 3px rgba(0,0,0,.5);
}

/* ========== 主页 BGM 开关 ========== */
.bgm-toggle{
  position:fixed;right:26px;bottom:26px;z-index:80;
  width:52px;height:52px;border-radius:50%;
  border:1px solid rgba(200,164,100,.6);
  background:rgba(40,28,16,.55);
  color:#f0e2c4;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,230,180,.12);
  transition:background .25s, transform .15s;
  font-size:22px;line-height:1;
}
.bgm-toggle:hover{background:rgba(70,48,24,.7);}
.bgm-toggle:active{transform:scale(.92);}
.bgm-toggle.playing .bgm-icon{animation:bgmPulse 2.2s ease-in-out infinite;}
.bgm-icon{display:block;transition:opacity .2s;}
.bgm-toggle.paused .bgm-icon{opacity:.45;}
@keyframes bgmPulse{
  0%,100%{transform:scale(1);}
  50%{transform:scale(1.22);}
}

@media (max-width:760px){
  .mr-people-grid{grid-template-columns:repeat(2,1fr);gap:14px;}
  .mr-person-img{height:170px;}
  .mr-detail{padding:3vh 3vw;}
  .mr-detail-scroll{padding:26px 22px 34px;}
  .mr-detail-hero{flex-direction:column;gap:22px;}
  .mr-detail-portrait{width:min(180px,46vw);}
}

/* ========== 趣味游戏 二级页 ========== */
.gm-layer{
  position:absolute;inset:0;
  opacity:0;pointer-events:none;transition:opacity .5s ease;
}
.gm-layer.active{opacity:1;}
.page.open .gm-layer.active{pointer-events:auto;}

.gm-bg{
  position:absolute;inset:0;background-size:cover;background-position:center;
  transform:scale(1.05);
}
.gm-scrim{
  position:absolute;inset:0;
  background:linear-gradient(to bottom, rgba(20,16,11,.28), rgba(20,16,11,.5) 55%, rgba(20,16,11,.78));
}
.gm-back-to-scroll{
  position:absolute;top:22px;left:26px;z-index:30;
  font-family:inherit;font-size:14px;letter-spacing:.12em;
  padding:9px 20px;border-radius:999px;cursor:pointer;
  border:1px solid rgba(255,255,255,.35);
  background:rgba(0,0,0,.45);color:#f5efe2;transition:all .3s ease;
}
.gm-back-to-scroll:hover{background:rgba(179,66,46,.8);border-color:transparent;}

.gm-title{
  position:absolute;top:6%;left:50%;transform:translateX(-50%);z-index:5;
  font-family:"华文行楷","STXingkai","华文楷体","STKaiti","楷体","KaiTi","演示流云楷",serif;
  font-size:clamp(38px,6vw,64px);letter-spacing:.1em;color:#f7f0df;font-weight:400;
  text-shadow:0 3px 10px rgba(0,0,0,.85), 0 0 30px rgba(0,0,0,.5);
}
.gm-sub{
  position:absolute;top:calc(6% + 74px);left:50%;transform:translateX(-50%);z-index:5;
  font-family:"华文楷体","STKaiti","楷体","KaiTi",serif;
  font-size:clamp(15px,1.9vw,20px);letter-spacing:.28em;color:#e6d3a6;font-weight:400;
  text-shadow:0 2px 6px rgba(0,0,0,.7);
}

/* 游戏大厅卡片 */
.gm-games{
  position:absolute;left:50%;top:54%;transform:translate(-50%,-50%);z-index:6;
  display:flex;gap:clamp(20px,3vw,46px);align-items:stretch;width:max-content;max-width:94vw;
}
.gm-game-card{
  position:relative;width:clamp(240px,26vw,360px);
  border-radius:16px;cursor:pointer;overflow:hidden;
  background:linear-gradient(180deg, rgba(40,28,14,.92), rgba(28,19,10,.94));
  border:1px solid rgba(214,178,106,.6);
  box-shadow:0 16px 40px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,230,180,.14);
  transition:transform .3s ease, box-shadow .3s ease;
  display:flex;flex-direction:column;align-items:stretch;text-align:left;
  color:#f5efe2;font-family:inherit;
}
.gm-game-card:not([data-soon]):hover{transform:translateY(-8px);box-shadow:0 22px 50px rgba(0,0,0,.6);}
.gm-game-card[data-soon]{cursor:not-allowed;opacity:.78;filter:saturate(.7);}
.gm-game-cover{
  width:100%;aspect-ratio:4/3;background-size:cover;background-position:center;
  transition:transform .5s ease;
}
.gm-game-card:not([data-soon]):hover .gm-game-cover{transform:scale(1.06);}
.gm-game-scrim{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom, rgba(20,16,11,0) 55%, rgba(20,16,11,.55) 100%);
}
.gm-game-body{
  position:relative;z-index:2;padding:16px 20px 20px;
  display:flex;flex-direction:column;gap:6px;
}
.gm-game-name{
  font-family:"华文行楷","STXingkai","华文楷体","STKaiti","楷体","KaiTi",serif;
  font-size:clamp(22px,2.4vw,30px);letter-spacing:.12em;color:#f7f0df;font-weight:400;
}
.gm-game-desc{
  font-family:"华文楷体","STKaiti","楷体","KaiTi",serif;
  font-size:13px;letter-spacing:.05em;color:#d8cbaa;line-height:1.6;
}
.gm-game-soon{
  position:absolute;top:12px;right:12px;z-index:3;
  font-size:11px;letter-spacing:.08em;color:#e6c986;
  padding:3px 10px;border:1px solid rgba(230,201,134,.5);border-radius:999px;
  background:rgba(20,16,11,.5);
}

/* ========== 知识竞答 ========== */
.gm-quiz-wrap{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:6;
  width:min(680px,92vw);max-height:86vh;overflow-y:auto;
  padding:34px 36px 40px;border-radius:16px;
  background:linear-gradient(180deg, rgba(52,38,22,.9), rgba(38,27,15,.94));
  border:1px solid rgba(214,178,106,.6);
  box-shadow:0 24px 60px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,230,180,.12);
  color:#f5efe2;
}
.gm-quiz-wrap::-webkit-scrollbar{width:6px;}
.gm-quiz-wrap::-webkit-scrollbar-thumb{background:rgba(200,164,100,.5);border-radius:3px;}
.gmq-head{
  display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;
}
.gmq-progress{
  font-family:"华文楷体","STKaiti","楷体","KaiTi",serif;font-size:14px;letter-spacing:.1em;color:#e6c986;
}
.gmq-score{
  font-family:"华文楷体","STKaiti","楷体","KaiTi",serif;font-size:16px;letter-spacing:.06em;color:#f0e2c4;font-weight:400;
}
.gmq-tag{
  display:inline-block;font-size:12px;letter-spacing:.1em;color:#c9b489;
  padding:4px 12px;border:1px solid rgba(200,164,100,.4);border-radius:999px;margin-bottom:14px;
}
.gmq-question{
  font-family:"华文楷体","STKaiti","楷体","KaiTi",serif;
  font-size:clamp(19px,2.3vw,24px);line-height:1.7;letter-spacing:.04em;color:#f7f0df;
  margin-bottom:24px;font-weight:400;
}
.gmq-opts{display:flex;flex-direction:column;gap:12px;}
.gmq-opt{
  position:relative;text-align:left;
  font-family:"华文楷体","STKaiti","楷体","KaiTi",serif;font-size:16px;letter-spacing:.04em;
  padding:14px 18px;border-radius:10px;cursor:pointer;
  background:rgba(255,244,220,.06);border:1px solid rgba(214,178,106,.35);color:#eee4ce;
  transition:background .25s, border-color .25s;
}
.gmq-opt:not(:disabled):hover{background:rgba(255,244,220,.14);border-color:rgba(214,178,106,.7);}
.gmq-opt:disabled{cursor:default;}
.gmq-opt.correct{background:rgba(60,150,80,.28);border-color:rgba(90,200,110,.8);color:#eaf7ec;}
.gmq-opt.wrong{background:rgba(180,60,50,.3);border-color:rgba(220,100,80,.8);color:#fbe9e6;}
.gmq-feedback{margin-top:20px;}
.gmq-fb{font-family:"华文楷体","STKaiti","楷体","KaiTi",serif;font-size:17px;letter-spacing:.06em;margin-bottom:8px;}
.gmq-fb-ok{color:#8fe0a0;}
.gmq-fb-no{color:#f0a89a;}
.gmq-exp{
  font-family:"华文楷体","STKaiti","楷体","KaiTi",serif;
  font-size:14.5px;line-height:1.9;letter-spacing:.03em;color:#d8cbaa;
  padding:14px 16px;border-left:3px solid rgba(200,164,100,.5);
  background:rgba(255,244,220,.05);border-radius:0 8px 8px 0;
}
.gmq-next{
  margin-top:22px;display:inline-block;
  font-family:"华文楷体","STKaiti","楷体","KaiTi",serif;font-size:16px;letter-spacing:.1em;
  padding:11px 28px;border-radius:999px;cursor:pointer;
  border:1px solid rgba(214,178,106,.6);background:rgba(179,66,46,.85);color:#fdf5e8;
  transition:background .25s;
}
.gmq-next:hover{background:rgba(200,80,56,.95);}

/* 竞答结果 */
.gmq-result{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;padding:20px 0;}
.gmq-result-score{
  font-family:"华文行楷","STXingkai","华文楷体","楷体",serif;
  font-size:clamp(42px,6vw,60px);letter-spacing:.06em;color:#f7f0df;font-weight:400;
}
.gmq-result-pct{font-family:"华文楷体","STKaiti","楷体","KaiTi",serif;font-size:20px;letter-spacing:.14em;color:#e6c986;}
.gmq-result-comment{
  font-family:"华文楷体","STKaiti","楷体","KaiTi",serif;font-size:16px;letter-spacing:.06em;color:#d8cbaa;margin-bottom:12px;
}
.gmq-again, .gmq-backhall{
  font-family:"华文楷体","STKaiti","楷体","KaiTi",serif;font-size:16px;letter-spacing:.1em;
  padding:11px 30px;border-radius:999px;cursor:pointer;transition:all .25s;
}
.gmq-again{border:1px solid rgba(214,178,106,.6);background:rgba(179,66,46,.85);color:#fdf5e8;}
.gmq-again:hover{background:rgba(200,80,56,.95);}
.gmq-backhall{border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.3);color:#f5efe2;}
.gmq-backhall:hover{background:rgba(255,255,255,.12);}


/* ========== 全屏按钮 + 横屏引导 ========== */
.fullscreen-toggle{
  position:fixed;right:26px;bottom:92px;z-index:80;
  width:52px;height:52px;border-radius:50%;
  border:1px solid rgba(200,164,100,.6);
  background:rgba(40,28,16,.55);
  color:#f0e2c4;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,230,180,.12);
  transition:background .25s, transform .15s;
  font-size:22px;line-height:1;
}
.fullscreen-toggle:hover{background:rgba(70,48,24,.7);}
.fullscreen-toggle:active{transform:scale(.92);}
.fullscreen-icon{display:block;}

/* 横屏引导层（仅竖屏时显示） */
.rotate-hint{
  position:fixed;inset:0;z-index:200;
  background:rgba(12,9,5,.88);backdrop-filter:blur(4px);
  display:none;align-items:center;justify-content:center;
}
.rotate-hint.show{display:flex;}
.rotate-hint-inner{
  display:flex;flex-direction:column;align-items:center;gap:16px;
  text-align:center;padding:40px 32px;
  border:1px solid rgba(214,178,106,.5);border-radius:16px;
  background:rgba(52,38,22,.6);
}
.rotate-hint-icon{font-size:56px;line-height:1;animation:rotateHint 2.4s ease-in-out infinite;}
@keyframes rotateHint{
  0%,100%{transform:rotate(0deg);}
  50%{transform:rotate(90deg);}
}
.rotate-hint-text{
  font-family:"华文行楷","STXingkai","华文楷体","STKaiti","楷体","KaiTi",serif;
  font-size:26px;letter-spacing:.12em;color:#f7f0df;
}
.rotate-hint-sub{
  font-family:"华文楷体","STKaiti","楷体","KaiTi",serif;
  font-size:14px;letter-spacing:.06em;color:#d8cbaa;
}

/* ========== 添加到主屏幕引导 ========== */
.pwa-hint{
  position:fixed;right:18px;bottom:18px;z-index:190;
  display:none;
  animation:pwaIn .5s ease;
}
.pwa-hint.show{display:block;}
@keyframes pwaIn{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}
.pwa-hint-inner{
  position:relative;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:18px 22px 20px;border-radius:14px;text-align:center;
  background:rgba(52,38,22,.92);border:1px solid rgba(214,178,106,.55);
  box-shadow:0 12px 30px rgba(0,0,0,.5);
  max-width:220px;
}
.pwa-hint-close{
  position:absolute;top:8px;right:12px;cursor:pointer;
  font-size:14px;color:#c9b489;line-height:1;
}
.pwa-hint-icon{font-size:32px;line-height:1;}
.pwa-hint-text{
  font-family:"华文行楷","STXingkai","华文楷体","STKaiti","楷体","KaiTi",serif;
  font-size:18px;letter-spacing:.08em;color:#f7f0df;
}
.pwa-hint-sub{
  font-family:"华文楷体","STKaiti","楷体","KaiTi",serif;
  font-size:12px;letter-spacing:.04em;color:#d8cbaa;line-height:1.6;
}