:root{
    --bg:#140508;
    --gold:#e8c07a;
    --gold-d:#a8763a;
    --txt:#f3e6d2;
    --dim:#a8907a;
  }
  *{box-sizing:border-box;}
  html,body{height:100%;}
  body{
    margin:0;overflow:hidden;
    background:radial-gradient(circle at 50% -8%, #40101a 0%, var(--bg) 62%);
    color:var(--txt);
    font-family:-apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",serif;
    display:flex;align-items:center;justify-content:center;
  }
  .hall{
    width:min(94vw,620px);
    display:flex;flex-direction:column;align-items:center;
    gap:clamp(9px,1.9vh,20px);
    transform-origin:center center;
  }

  /* ---------- 横匾 ---------- */
  .plaque{
    position:relative;
    width:min(100%,560px);
    padding:clamp(6px,1.2vh,12px) clamp(12px,2.6vw,22px);
    border-radius:5px;
    background:linear-gradient(180deg,#8b1d27 0%,#520e17 46%,#280509 100%);
    box-shadow:
      0 0 0 2px #22060a,
      0 0 0 3.5px var(--gold-d),
      0 0 0 5.5px #22060a,
      0 14px 32px rgba(0,0,0,.62),
      inset 0 0 26px rgba(0,0,0,.5),
      inset 0 1px 0 rgba(255,222,166,.22);
  }
  .plaque::before{
    content:"";position:absolute;inset:0;border-radius:5px;pointer-events:none;
    background:repeating-linear-gradient(90deg,rgba(255,235,200,.035) 0 1px,transparent 1px 8px);
    mix-blend-mode:overlay;
  }
  .plaque-inner{
    position:relative;
    border:1px solid rgba(232,192,122,.5);
    border-radius:3px;
    padding:clamp(9px,1.8vh,20px) 0;
    background:linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.42));
    box-shadow:inset 0 0 18px rgba(0,0,0,.45);
  }
  .stud{
    position:absolute;width:7px;height:7px;border-radius:50%;
    background:radial-gradient(circle at 34% 30%,#fff5d8,#e2b769 46%,#8a5d1f 100%);
    box-shadow:0 0 6px rgba(255,214,148,.55);
    z-index:2;
  }
  .stud.tl{top:4px;left:4px;} .stud.tr{top:4px;right:4px;}
  .stud.bl{bottom:4px;left:4px;} .stud.br{bottom:4px;right:4px;}

  .plaque-text{
    font-family:"STLiti","LiSu","隶书","STKaiti","KaiTi","楷体","Songti SC","SimSun",serif;
    font-size:clamp(30px,7vh,56px);
    font-weight:700;
    line-height:1.1;
    letter-spacing:clamp(12px,3.4vw,30px);
    text-align:center;
    text-indent:clamp(12px,3.4vw,30px);   /* 抵掉最后一个字后面的字距，让三个字真正居中 */
    white-space:nowrap;
    background:linear-gradient(180deg,#fff8e6 0%,#f4d79c 34%,#cea052 66%,#8b6026 100%);
    -webkit-background-clip:text;background-clip:text;
    color:transparent;
    filter:drop-shadow(0 1px 0 rgba(88,56,14,.9)) drop-shadow(0 3px 4px rgba(0,0,0,.6));
  }

  /* ---------- 神龛 ---------- */
  .niche{
    position:relative;width:100%;
    border:1px solid #4a2418;
    border-radius:6px 6px 14px 14px;
    background:linear-gradient(180deg,#25100c 0%,#1b0a0c 100%);
    padding:clamp(12px,2.4vh,32px) 14px clamp(8px,1.6vh,22px);
    box-shadow:0 0 70px rgba(232,192,122,.10) inset, 0 18px 44px rgba(0,0,0,.5);
    text-align:center;
  }
  .niche::before,
  .niche::after{
    content:"";position:absolute;top:12px;bottom:12px;width:1px;
    background:linear-gradient(180deg,transparent,#4a2418,transparent);
  }
  .niche::before{left:12px;}
  .niche::after{right:12px;}

  /* ---------- 牌位 ---------- */
  .tablet{
    display:inline-block;
    background:linear-gradient(180deg,#8d1b26 0%,#5e0f1a 100%);
    border:2px solid var(--gold);
    border-radius:4px;
    padding:clamp(12px,2vh,20px) clamp(14px,3vw,22px);
    box-shadow:0 0 24px rgba(232,192,122,.22), 0 10px 26px rgba(0,0,0,.55);
  }
  /* 右列“根号二”，左列“之位”，两列各自在自己的高度里居中，
     左列字少、自然就矮一截往下错开 —— 不是一行对一行 */
  .t-text{
    display:flex;flex-direction:row-reverse;align-items:center;
    justify-content:center;
    gap:clamp(4px,1vh,9px);
    font-family:"STLiti","LiSu","隶书","STBishu","STKaiti","KaiTi","Songti SC","SimSun",serif;
    font-size:clamp(21px,3.3vh,31px);
    color:#ffeccd;
    text-shadow:0 0 12px rgba(255,220,160,.45);
  }
  .t-text .col{
    writing-mode:vertical-rl;
    letter-spacing:7px;
    line-height:1;
    white-space:nowrap;
  }
  .t-text .gold{color:var(--gold);}          /* 整块“根号二”都是金的 */
  /* 之位：字号比右列大一点，视觉上才和金色的“根号二”一样粗重 */
  .t-text .col2{font-size:1.16em;line-height:1;letter-spacing:7px;}
  /* 两列不逐字对齐：左列只是自己居中 */
  .t-text .col2{align-self:center;position:relative;top:0.12em;}

  /* ---------- 头像 ---------- */
  .avatar{
    position:relative;isolation:isolate;
    width:clamp(68px,11.5vh,104px);height:clamp(68px,11.5vh,104px);
    margin:0 auto clamp(8px,1.4vh,14px);
    padding:3px;border-radius:50%;
    background:linear-gradient(160deg,#f8e4b0 0%,#c99a55 46%,#7a5320 100%);
    box-shadow:0 0 0 1px #2a1208, 0 0 24px rgba(232,192,122,.26), 0 9px 20px rgba(0,0,0,.55);
  }
  .avatar::before{          /* 背后的一圈香火光 */
    content:"";position:absolute;inset:-16px;border-radius:50%;z-index:-1;
    background:radial-gradient(circle,rgba(232,192,122,.22),rgba(232,192,122,0) 70%);
  }
  .avatar img{
    display:block;width:100%;height:100%;border-radius:50%;
    object-fit:cover;object-position:50% 42%;
    filter:saturate(1.08) contrast(1.06);
  }
  .avatar::after{           /* 玻璃罩的暗角 */
    content:"";position:absolute;inset:3px;border-radius:50%;pointer-events:none;
    box-shadow:inset 0 0 18px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,232,186,.22);
  }

  /* ---------- 香炉 ---------- */
  /* 遮挡关系由下到上：香灰(sand) → 三根香(stick) → 炉身(bowl)；香根插进炉口后被炉身和炉口暗部压住 */
  .censer{position:relative;margin:clamp(10px,1.7vh,22px) auto 9px;width:210px;height:170px;}

  .sand{
    position:absolute;left:32px;bottom:57px;width:146px;height:16px;border-radius:50%/26%;
    background:radial-gradient(ellipse at 50% 22%,#c1954e 0%,#8a6229 48%,#4a3110 100%);
    box-shadow:inset 0 5px 8px rgba(0,0,0,.5), inset 0 -5px 7px rgba(255,226,172,.28);
    z-index:2;                 /* 香灰压在香根上面：香是插进灰里的 */
  }

  .stick{
    position:absolute;width:3px;border-radius:2px;
    background:linear-gradient(180deg,#f0dbbe 0%,#b58e66 46%,#7b5a3b 100%);
    transform-origin:bottom center;
    box-shadow:0 0 6px rgba(0,0,0,.55);
    z-index:1;
  }
  .stick i{
    position:absolute;top:-3px;left:-1.5px;width:6px;height:6px;border-radius:50%;
    background:#ff8a3d;opacity:0;transform:scale(.35);
    box-shadow:0 0 12px 4px rgba(255,120,40,.65);
    transition:opacity .22s ease,transform .22s ease;
  }
  .stick.lit i{opacity:1;transform:scale(1);animation:flicker 1.4s ease-in-out infinite alternate;}
  @keyframes flicker{ from{opacity:.68;transform:scale(.86);} to{opacity:1;transform:scale(1.16);} }

  .s1{left:52px;height:88px;bottom:48px;transform:rotate(-7deg);}
  .s2{left:103px;height:94px;bottom:50px;}
  .s3{left:154px;height:86px;bottom:50px;transform:rotate(7deg);}

  .bowl{
    position:absolute;bottom:-9px;left:16px;width:178px;height:64px;
    background:linear-gradient(180deg,#d9b273 0%,#b78d51 20%,#8a6430 52%,#563c14 78%,#33220a 100%);
    border-radius:38px 38px 46px 46px / 14px 14px 36px 36px;
    box-shadow:0 14px 26px rgba(0,0,0,.62), inset 0 0 30px rgba(0,0,0,.4), inset 0 -12px 20px rgba(0,0,0,.42);
    z-index:3;
  }
  .bowl::before{            /* 炉口亮边 */
    content:"";position:absolute;left:12px;right:12px;top:0;height:3px;border-radius:50%;
    background:linear-gradient(180deg,rgba(255,244,214,.85),rgba(255,222,164,0));
    opacity:.5;
  }
  .bowl::after{             /* 炉口内侧的暗，让香灰看起来是凹下去的 */
    content:"";position:absolute;left:14px;right:14px;top:0;height:8px;border-radius:50%;
    background:radial-gradient(ellipse at 50% 20%,rgba(18,9,0,.75),rgba(18,9,0,0) 76%);
  }

  /* 上升的烟 */
  .smoke{
    position:absolute;width:8px;height:8px;border-radius:50%;
    background:rgba(230,215,190,.28);
    filter:blur(3px);
    display:none;
    z-index:4;
  }
  .smoke.on{display:block;animation:rise 4.6s linear infinite;}
  @keyframes rise{
    0%{opacity:0;transform:translateY(0) scale(.6);}
    18%{opacity:.75;}
    100%{opacity:0;transform:translateY(-118px) scale(2.1) translateX(14px);}
  }
  .smoke.d1{left:39px;bottom:128px;animation-duration:4.4s;}
  .smoke.d2{left:100px;bottom:136px;animation-duration:5.2s;animation-delay:.9s;}
  .smoke.d3{left:162px;bottom:128px;animation-duration:4.8s;animation-delay:1.7s;}

  /* 点击上香时的烟团 */
  .puff{
    position:absolute;bottom:126px;width:16px;height:16px;border-radius:50%;
    background:rgba(240,225,200,.4);filter:blur(5px);
    animation:puff .95s ease-out forwards;pointer-events:none;z-index:4;
  }
  @keyframes puff{
    0%{opacity:.9;transform:translate(-50%,0) scale(.5);}
    100%{opacity:0;transform:translate(-50%,-70px) scale(2.4);}
  }

  /* ---------- 交互 ---------- */
  .btn{
    display:inline-flex;align-items:center;justify-content:center;
    padding:clamp(7px,1.3vh,11px) clamp(12px,2.6vw,26px);
    border:1px solid var(--gold);
    border-radius:999px;
    background:linear-gradient(180deg,#8d1b26,#5a0e18);
    color:var(--gold);
    font-size:clamp(13px,1.8vh,15.5px);letter-spacing:5px;text-indent:5px;
    font-family:inherit;cursor:pointer;text-decoration:none;
    transition:.18s;
    box-shadow:0 8px 22px rgba(0,0,0,.45);
  }
  .btn:hover{filter:brightness(1.18);}
  .btn:active{transform:translateY(1px);}

  .counter{font-size:13px;color:var(--dim);letter-spacing:2px;}
  .counter b{color:var(--gold);font-size:16px;font-family:ui-monospace,monospace;}

  .actions{
    position:relative;
    display:flex;align-items:center;justify-content:center;
    gap:clamp(6px,1.8vw,14px);flex-wrap:nowrap;
  }
  .btn:disabled{opacity:.55;cursor:default;filter:none;}

  /* ---------- 留言：贴在按钮下方的小输入条（不挡香炉） ---------- */
  .say{
    position:absolute;left:50%;top:calc(100% + 10px);
    transform:translateX(-50%);
    display:none;align-items:center;gap:8px;
    width:min(92%,420px);padding:9px 11px;
    border:1px solid #6d2b2b;border-radius:12px;
    background:linear-gradient(180deg,rgba(42,17,19,.98),rgba(20,8,10,.98));
    box-shadow:0 14px 30px rgba(0,0,0,.62);
    z-index:70;
  }
  .say.on{display:flex;}
  /* 输入条展开时把下面那行计数让开，别透上来 */
  body.typing .counter{opacity:0;transition:opacity .18s;}
  .say input{
    flex:1;min-width:0;border:0;outline:0;background:transparent;
    color:#ffeccd;font:inherit;font-size:14px;letter-spacing:1px;padding:4px 2px;
  }
  .say input::placeholder{color:#7d6154;}
  .say .send{
    flex:none;border:1px solid var(--gold);border-radius:999px;cursor:pointer;
    background:linear-gradient(180deg,#8d1b26,#5a0e18);color:var(--gold);
    font:inherit;font-size:13px;letter-spacing:2px;text-indent:2px;padding:5px 12px;
  }
  .say .send:hover{filter:brightness(1.2);}

  /* ---------- 弹幕 ---------- */
  .dm-layer{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:55;}
  .dm{
    position:absolute;left:0;white-space:nowrap;
    font-size:clamp(14px,2vh,18px);letter-spacing:1px;
    color:#ffe3ae;
    text-shadow:0 2px 9px rgba(0,0,0,.92), 0 0 20px rgba(255,180,90,.3);
  }

  /* ---------- 偷贡品：浮起的字 ---------- */
  .steal-text{
    position:fixed;
    width:min(52vw,520px);
    text-align:center;
    pointer-events:none;
    z-index:60;
    font-size:clamp(15px,2.3vh,20px);
    line-height:1.85;
    letter-spacing:1px;
    color:#ffd979;
    white-space:pre-line;
    max-height:46vh;
    overflow:hidden;
    text-shadow:0 2px 10px rgba(0,0,0,.85), 0 0 26px rgba(255,190,90,.35);
    animation:stealPop 3.1s ease-out forwards;
  }
  .steal-text .src{
    display:block;margin-top:8px;
    font-size:clamp(11px,1.5vh,13px);letter-spacing:2px;
    color:#c2a377;text-shadow:0 1px 6px rgba(0,0,0,.85);
  }
  .steal-text.loading{color:#bd9a6c;letter-spacing:5px;}
  @keyframes stealPop{
    0%{opacity:0;transform:translateY(12px) scale(.72);}
    8%{opacity:1;transform:translateY(-6px) scale(1.1);}
    16%{transform:translateY(-14px) scale(1);}
    72%{opacity:1;transform:translateY(-30px) scale(1);}
    100%{opacity:0;transform:translateY(-74px) scale(.97);}
  }
  .steal-bit{
    position:fixed;pointer-events:none;z-index:61;
    font-size:clamp(20px,3vh,30px);
    animation:stealBounce 1s ease-out forwards;
  }
  /* ---------- 手机端 ---------- */
  @media (max-width:540px){
    .hall{width:95vw;gap:clamp(7px,1.5vh,14px);}
    .plaque-text{letter-spacing:clamp(8px,2.6vw,22px);text-indent:clamp(8px,2.6vw,22px);}
    .niche{padding:clamp(8px,1.8vh,20px) 6px clamp(6px,1.1vh,14px);}
    .tablet{padding:clamp(10px,1.8vh,18px) clamp(12px,4vw,20px);}
    .bowl{box-shadow:0 10px 18px rgba(0,0,0,.62),0 0 20px rgba(232,192,122,.16) inset, inset 0 -8px 14px rgba(0,0,0,.35);}
    .btn{padding:8px 12px;font-size:13px;letter-spacing:3px;text-indent:3px;}
  }
  @media (max-width:380px){
    .plaque-text{letter-spacing:6px;text-indent:6px;}
    .btn{padding:6px 8px;font-size:12px;letter-spacing:1.5px;text-indent:1.5px;}
    .actions{gap:5px;}
  }

  @keyframes stealBounce{
    0%{opacity:1;transform:translate(-50%,0) scale(1);}
    30%{transform:translate(-50%,-40px) scale(1.3);}
    60%{transform:translate(-50%,0) scale(1);}
    100%{opacity:0;transform:translate(-50%,50px) scale(.5);}
  }