/* ==========================================================================
   尖勾传媒 · 9 月大哥榜（电视版）— 共享内核样式
   场景(scene) → 多层 3D 视差层(layer) → UI 层
   界面上只保留三处文案：标题「今日大哥榜」+ 按钮「滚动播放」「完整榜单」
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700;900&display=swap');

*{box-sizing:border-box}

:root{
  --serif:'Noto Serif SC','STSong','SimSun','Songti SC',serif;
  --num:'Georgia','Times New Roman',serif;
  --ease-soft:cubic-bezier(.22,.68,.18,1);
  --ease-out:cubic-bezier(.16,.84,.24,1);
}

html,body{margin:0;width:100%;height:100%;overflow:hidden}

body{
  font-family:var(--serif);
  background:var(--bg-deep,#3d0507);
  color:var(--ink,#ffe0a4);
  isolation:isolate;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
  cursor:pointer;
  overscroll-behavior:none;
}
body.cursor-hidden,body.cursor-hidden *{cursor:none!important}

button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;margin:0;padding:0}
:focus-visible{outline:2px solid var(--focus,#ffe1a1);outline-offset:4px;border-radius:6px}

/* ---------- 3D 场景 ---------- */
.scene{
  position:fixed;inset:0;overflow:hidden;
  perspective:1500px;
  perspective-origin:50% 46%;
  transform-style:preserve-3d;
}
.layer{
  position:absolute;inset:0;
  transform-style:preserve-3d;
  pointer-events:none;
  backface-visibility:hidden;
}
/* 只有真正开启视差（.scene 带 .parallax）时才做图层提升；
   默认全部静态，任何层都不提升，避免大图层白占显存、避免整屏重绘 */
.scene.parallax .layer{will-change:transform}
.scene:not(.parallax) .layer{will-change:auto;transform:none!important}
.layer.bleed{inset:-6%}
.layer.bleed>svg{width:100%;height:100%;display:block}
canvas.layer{display:block;width:100%;height:100%}

.ui{position:absolute;inset:0;pointer-events:none}
.ui .pe{pointer-events:auto}

/* ---------- 标题（界面唯一标题文案） ---------- */
.title{
  position:absolute;left:var(--frame-left,18vw);right:var(--frame-right,14vw);top:2.2vh;z-index:8;
  text-align:center;pointer-events:none;line-height:1;
}
.title h1{
  margin:0;display:inline-block;
  font-size:min(7.2vw,11.8vh);font-weight:900;line-height:1.1;
  letter-spacing:.07em;padding-left:.07em;white-space:nowrap;
  background:var(--title-grad,linear-gradient(180deg,#fff8d6,#ffd88f 45%,#a8622a 62%,#ffe6ae));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:var(--title-filter,drop-shadow(0 3px 0 #7d3a1a) drop-shadow(0 8px 18px #10030a));
}
.title .spark{
  position:absolute;top:-1.2vh;width:3.2vh;height:3.2vh;color:var(--spark,#fff6cf);
  opacity:.85;filter:drop-shadow(0 0 8px #ffdf9a);animation:sparkle 3s var(--ease-soft) infinite;
}
.title .spark.left{left:16%}
.title .spark.right{right:16%;animation-delay:1.3s}
@keyframes sparkle{
  0%,100%{opacity:.28;transform:scale(.72) rotate(0deg)}
  46%{opacity:1;transform:scale(1.18) rotate(26deg)}
}

/* ---------- 卷轴 ---------- */
/* 卷轴固定不动：阴影交给 .paper 自身的 box-shadow，不再用每帧重算的 drop-shadow */
.scrollwrap{
  position:absolute;
  left:var(--frame-left,18vw);right:var(--frame-right,14vw);
  top:var(--frame-top,15vh);bottom:var(--frame-bottom,6vh);
  z-index:6;
}
.scroll{position:absolute;inset:0;transform-style:preserve-3d}

.rod{
  position:absolute;top:-1.9vh;bottom:-1.9vh;width:2.5vw;min-width:14px;max-width:96px;z-index:3;
  border-radius:6px;pointer-events:none;
  background:var(--rod-bg,linear-gradient(90deg,#5b2d13,#a3722f 16%,#ffe7ae 36%,#d8a75f 54%,#7d4520 82%,#c08f4b));
  border:1px solid var(--rod-line,#eccd8b);
  box-shadow:0 10px 26px #160407b0,inset 0 0 12px #0005;
}
.rod-left{left:0}
.rod-right{right:0}
.rod::before,.rod::after{
  content:'';position:absolute;left:-24%;width:148%;height:3vh;min-height:18px;
  background:var(--cap-bg,linear-gradient(90deg,#8a5426,#ffdda0 42%,#a9713a));
  border:1px solid var(--rod-line,#cca164);border-radius:4px;
  box-shadow:0 3px 9px #26080b,inset 0 0 6px #fff3;
}
.rod::before{top:-1.2vh}
.rod::after{bottom:-1.2vh}

.paper{
  position:absolute;left:2.6vw;right:2.6vw;top:0;bottom:0;z-index:2;
  display:flex;flex-direction:column;
  background:var(--paper-bg,#3a1214);
  border-radius:4px;
  box-shadow:var(--paper-shadow,0 0 90px #0b010670,inset 0 0 70px #00000055);
  overflow:hidden;
}
.paper-inner{position:absolute;inset:2.6vh 2.2vw;display:flex;flex-direction:column;min-height:0;z-index:2}

/* 榜单视口 */
.viewport{
  position:relative;flex:1;min-height:0;
  perspective:1000px;transform-style:preserve-3d;
  mask-image:linear-gradient(180deg,transparent,#000 9%,#000 91%,transparent);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 9%,#000 91%,transparent);
}
.viewport.board-mode{
  mask-image:none;-webkit-mask-image:none;
  display:flex;flex-direction:column;justify-content:center;gap:.2vh;
}

/* ---------- 单名大卡（揭榜模式） ---------- */
.rank-card{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2.5vh;text-align:center;
  transform-style:preserve-3d;will-change:transform,opacity;
}
.rank-num{
  font-family:var(--num);font-weight:700;line-height:1;letter-spacing:.04em;
  font-variant-numeric:tabular-nums;
  font-size:min(5vw,8.2vh);
  color:var(--rank-ink,#f2c473);
  text-shadow:0 3px 12px #2a0306,0 1px 0 #fff2c855;
}
.avatar-wrap{
  position:relative;flex:0 0 auto;display:block;
  width:min(28vh,19.5vw);height:min(28vh,19.5vw);
  border-radius:50%;padding:.9vh;
  background:var(--avatar-ring-bg,linear-gradient(150deg,#fff2c4,#e8b64c 38%,#96590f 78%,#ffdf9a));
  box-shadow:
    0 0 0 .24vh var(--avatar-ring-line,#ffe9b8),
    0 18px 48px #24030699,
    0 0 80px var(--avatar-glow,#ff9a2e59);
}
.avatar-wrap img{
  width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;
  background:var(--avatar-bg,#63100f);
  box-shadow:inset 0 0 24px #0000008c;
}
/* 名次第一：金环加亮 + 外发光 */
.rank-card.is-first .rank-num{color:var(--rank-ink-first,#ffe4a4)}
.rank-card.is-first .avatar-wrap{
  box-shadow:
    0 0 0 .3vh var(--avatar-ring-line-first,#fff6d6),
    0 18px 50px #240306a6,
    0 0 96px var(--avatar-glow-first,#ffcb5c8c);
}

.member-name{
  max-width:94%;display:block;font-weight:900;line-height:1.24;white-space:nowrap;
  letter-spacing:.04em;padding-left:.04em;
  font-size:min(5.2vw,8.2vh);
  color:var(--name-ink,#ffe6a8);
  text-shadow:var(--name-shadow,0 3px 0 #7f5026,0 8px 22px #100206);
}
.member-amount{
  font-family:var(--num);font-weight:700;line-height:1.1;letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
  font-size:min(4.5vw,7.2vh);
  color:var(--amount-ink,#ffd88a);
  text-shadow:0 3px 16px #140305;
}
.member-amount small{font-size:.5em;margin-right:.2em;font-weight:400;opacity:.78}

/* ---------- 完整榜单（一屏十名） ---------- */
.board-row{
  display:grid;align-items:center;
  grid-template-columns:4.4vw min(6vh,6vw) 1fr auto;
  gap:0 1.05vw;
  flex:1 1 0;min-height:0;max-height:7.2vh;
  padding:0 1.1vw;border-radius:.7vh;
  background:var(--row-bg,transparent);
  border:1px solid var(--row-line,transparent);
}
.board-row .br-rank{
  font-family:var(--num);font-size:min(3vh,2.8vw);font-weight:700;letter-spacing:.05em;
  color:var(--row-rank,#e2ac5e);font-variant-numeric:tabular-nums;text-align:left;
}
.board-row .br-avatar{
  display:block;width:min(5.4vh,5.4vw);height:min(5.4vh,5.4vw);
  border-radius:50%;overflow:hidden;
  border:1px solid var(--badge-ring,#ffd58a80);
  box-shadow:0 2px 10px #00000059,0 0 16px var(--badge-glow,#ff9a2e33);
  background:var(--badge-bg,#63100f);
}
.board-row .br-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.board-row .br-name{
  font-size:min(3.3vh,3.1vw);font-weight:700;letter-spacing:.03em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  color:var(--row-name,#ffe7b4);
}
.board-row .br-amount{
  font-family:var(--num);font-size:min(3.5vh,3.3vw);font-weight:700;
  font-variant-numeric:tabular-nums;color:var(--row-amount,#ffd88a);
}
.board-row .br-amount small{font-size:.62em;margin-right:.16em;opacity:.72}
.board-row.is-first{
  background:var(--row-bg-first,#ffc65f2e);
  border-color:var(--row-line-first,#ffd58a5c);
}
.board-row.is-first .br-rank{color:var(--row-rank-first,#ffd98f)}
.board-row.is-first .br-name{color:var(--row-name-first,#fff8e0)}
.board-row.is-first .br-avatar{
  border-color:var(--badge-ring-first,#fff0c2);
  box-shadow:0 2px 12px #00000066,0 0 26px #ffb43f66;
}

/* ---------- 右侧按钮组（滚动播放 / 完整榜单） ---------- */
.controls{
  position:absolute;right:2vw;top:50%;transform:translateY(-50%);z-index:10;
  display:flex;flex-direction:column;gap:1.5vh;
}
.ctl{
  pointer-events:auto;position:relative;display:flex;align-items:center;gap:.75vw;
  padding:1.5vh 1.3vw;min-width:9.4vw;justify-content:flex-start;
  border-radius:1.1vh;
  background:var(--ctl-bg,linear-gradient(150deg,#5c1c14e0,#2c0b0be6));
  border:1px solid var(--ctl-line,#c99a5c88);
  box-shadow:0 8px 22px #0a010560,inset 0 1px 0 #ffffff2e;
  color:var(--ctl-ink,#f6dda4);
  font-size:1.9vh;font-weight:700;letter-spacing:.16em;
  text-shadow:0 2px 6px #0008;
  transition:transform .18s var(--ease-out),box-shadow .18s var(--ease-out),background .2s,border-color .2s;
}
.ctl svg{width:2.6vh;height:2.6vh;flex:0 0 auto;opacity:.92}
.ctl:hover{transform:translateX(-.35vw);box-shadow:0 10px 26px #0a010570,inset 0 1px 0 #ffffff3d}
.ctl:active{transform:translateX(-.35vw) scale(.975)}
.ctl .knob{
  margin-left:auto;width:1.5vh;height:1.5vh;border-radius:50%;
  background:var(--knob-off,#ffffff26);box-shadow:inset 0 0 0 1px #ffffff33;
  transition:background .2s,box-shadow .2s;
}
.ctl.is-on{
  background:var(--ctl-bg-on,linear-gradient(150deg,#ffd766,#c1810d));
  border-color:var(--ctl-line-on,#fff4cf);
  color:var(--ctl-ink-on,#4a1c04);
  text-shadow:0 1px 0 #ffffff5c;
}
.ctl.is-on .knob{background:var(--knob-on,#4a1c04);box-shadow:0 0 10px #ffe9b3}

/* 上下一名（取代滚轮） */
.pager{display:flex;align-items:center;justify-content:space-between;gap:1vw;margin-top:.2vh}
.pg{
  pointer-events:auto;flex:1 1 0;height:6.6vh;min-height:40px;
  display:grid;place-items:center;border-radius:1.1vh;
  background:var(--ctl-bg,linear-gradient(150deg,#5c1c14e0,#2c0b0be6));
  border:1px solid var(--ctl-line,#c99a5c88);
  box-shadow:0 8px 22px #0a010560,inset 0 1px 0 #ffffff2e;
  color:var(--ctl-ink,#f6dda4);
  transition:transform .16s var(--ease-out),box-shadow .16s var(--ease-out),opacity .2s,background .2s;
}
.pg svg{width:3.2vh;height:3.2vh}
.pg:hover:not(:disabled){transform:translateX(-.3vw);box-shadow:0 10px 26px #0a010570,inset 0 1px 0 #ffffff3d}
.pg:active:not(:disabled){transform:translateX(-.3vw) scale(.96)}
.pg:disabled{opacity:.3;cursor:default}

/* ---------- 右上角：全屏按钮 ---------- */
.corner-btn{
  position:absolute;right:2.2vw;top:3vh;z-index:10;pointer-events:auto;
  width:9vh;height:9vh;min-width:48px;min-height:48px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--ctl-bg,linear-gradient(150deg,#a82a17e6,#5b0d0ae8));
  border:1px solid var(--ctl-line,#f5d49399);
  box-shadow:0 8px 22px #2a030599,inset 0 1px 0 #ffffff2e;
  color:var(--ctl-ink,#ffe9bb);
  transition:transform .18s var(--ease-out),box-shadow .18s var(--ease-out);
}
.corner-btn svg{width:4.2vh;height:4.2vh}
.corner-btn:hover{transform:scale(1.07);box-shadow:0 10px 28px #2a0305b3,inset 0 1px 0 #ffffff40}
.corner-btn:active{transform:scale(.94)}

/* ---------- 竖屏 / 方屏兜底 ---------- */
@media(max-aspect-ratio:1/1){
  .scrollwrap{left:5vw;right:5vw;top:13vh;bottom:18vh}
  .title{left:5vw;right:5vw}
  .controls{right:auto;left:5vw;right:5vw;top:auto;bottom:3vh;transform:none}
  .pager{margin-top:.6vh}
  .pg{height:7vh}
  .ctl{min-width:0}
  .corner-btn{width:7vh;height:7vh;top:2vh}
  .avatar-wrap{width:min(22vh,30vw);height:min(22vh,30vw)}
  .board-row{grid-template-columns:9vw min(6vh,6vw) 1fr auto;max-height:none}
}
@media(prefers-reduced-motion:reduce){
  .rank-card{will-change:auto}
}


/* ===== theme ===== */
/* ==========================================================================
   主题 · 赤焰喜庆
   正红 + 足金的高饱和节日风；回纹描金外框、双挂宫灯、红绸描金榜板
   ========================================================================== */

body[data-theme="c"]{
  --bg-deep:#3d0507;
  --ink:#ffe0a4;
  --focus:#ffe1a1;
  --ember:#ffca6a;

  /* 版面：左侧完整留给主视觉人物，右侧留给按钮组。
     ⚠️ 立绘是 background-size:auto 100% —— 宽度跟着「视口高度」走，
        而卷轴左缘是 vw 单位。视口越"方"(宽高比越小)，图就相对越宽，
        人像整体右移，右耳会被轴杆切掉（全屏后视口变高就会触发）。
     所以左留白不能写死，要用 max()：至少 24vw，同时保证 ≥ 右耳最右端 + 余量。 */
  --hero-w:62.55vh;                                      /* 立绘渲染宽度 = 视口高 × (992/1586) */
  --hero-ear:calc(var(--hero-w) * .807);                 /* 右耳最右端落在图片宽度的 80.7% 处 */
  --frame-left:max(24vw, calc(var(--hero-ear) + 1.8vw));
  --frame-right:13.5vw;
  --frame-top:17vh;
  --frame-bottom:6vh;

  --title-grad:linear-gradient(178deg,#fffdf0 3%,#ffe9a8 24%,#ffc63f 48%,#c9700d 60%,#ffe08a 80%,#fff3c9 96%);
  --title-filter:drop-shadow(0 .32vh 0 #8d2a08) drop-shadow(0 .7vh 0 #5a1405) drop-shadow(0 1.6vh 2vh #2a0305) drop-shadow(0 0 5vh #ff9a2e55);
  --spark:#fff6cf;

  --rod-bg:linear-gradient(90deg,#7a1d10,#c9871f 15%,#fff0c0 34%,#e0ac4a 52%,#8c3a12 82%,#d19a3c);
  --rod-line:#ffe1a0;
  --cap-bg:linear-gradient(90deg,#a8341a,#ffdfa2 40%,#c4801f);

  --paper-bg:
    repeating-linear-gradient(90deg,#ffffff09 0 2px,#00000000 2px 6px),
    radial-gradient(120% 78% at 50% -8%,#ab2717,transparent 60%),
    linear-gradient(178deg,#8f1614,#5f0b0e 58%,#7c1113);
  --paper-shadow:
    0 0 110px #1c020470,
    0 32px 64px #24020599,
    inset 0 0 90px #00000070,
    inset 0 0 0 1px #f6d68c52;

  /* 名次 / 昵称 / 金额 */
  --rank-ink:#f2c473;
  --rank-ink-first:#ffe4a4;
  --name-ink:#ffe6a8;
  --amount-ink:#ffd88a;

  /* 头像金环 */
  --avatar-ring-bg:linear-gradient(150deg,#fff3c8,#e8b64c 36%,#9a5c10 76%,#ffe2a0);
  --avatar-ring-line:#ffe9b8;
  --avatar-ring-line-first:#fff8dc;
  --avatar-glow:#ff9a2e59;
  --avatar-glow-first:#ffcb5c8c;
  --avatar-bg:#63100f;

  /* 完整榜单行 */
  --row-bg:transparent;
  --row-line:transparent;
  --row-bg-first:linear-gradient(90deg,#ffc65f33,#00000000 78%);
  --row-line-first:#ffd58a5c;
  --row-rank:#e2ac5e;
  --row-rank-first:#ffd98f;
  --row-name:#ffe7b4;
  --row-name-first:#fff8e0;
  --row-amount:#ffd88a;
  --badge-ring:#ffd58a73;
  --badge-ring-first:#fff0c2;
  --badge-glow:#ff9a2e33;
  --badge-bg:#63100f;

  /* 按钮 */
  --ctl-bg:linear-gradient(150deg,#a82a17e6,#5b0d0ae8);
  --ctl-line:#f5d49399;
  --ctl-ink:#ffe9bb;
  --ctl-bg-on:linear-gradient(150deg,#ffd766,#c1810d);
  --ctl-line-on:#fff4cf;
  --ctl-ink-on:#4a1c04;
  --knob-off:#ffffff2e;
  --knob-on:#4a1c04;
}

/* ---------- 背景：正红底 + 灯笼光斑 ---------- */
body[data-theme="c"] .bg{
  background:
    radial-gradient(48% 40% at 50% 20%,#e06a1c38,transparent 72%),
    radial-gradient(34% 30% at 10% 82%,#ffbb4a2b,transparent 72%),
    radial-gradient(30% 26% at 90% 14%,#ff9e3a24,transparent 72%),
    linear-gradient(178deg,#7a0f11,#4a0709 58%,#330406);
}
body[data-theme="c"] .bokeh{
  background-image:
    radial-gradient(circle 12px at 10% 20%,#ffd18259,transparent 100%),
    radial-gradient(circle 8px at 24% 74%,#ffbe5f45,transparent 100%),
    radial-gradient(circle 15px at 80% 16%,#ffd68f52,transparent 100%),
    radial-gradient(circle 9px at 90% 66%,#ffc47142,transparent 100%),
    radial-gradient(circle 13px at 66% 88%,#ffcf8747,transparent 100%),
    radial-gradient(circle 7px at 40% 10%,#ffe3ab4d,transparent 100%),
    radial-gradient(circle 10px at 50% 94%,#ffbb5c40,transparent 100%);
}
body[data-theme="c"] .cloud-pattern{
  opacity:.14;color:#ffc97a;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='120' viewBox='0 0 240 120'><g fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round'><path d='M24 88a18 18 0 0 1 6-35 22 22 0 0 1 41-7 18 18 0 0 1 28 18'/><path d='M132 88a18 18 0 0 1 6-35 22 22 0 0 1 41-7 18 18 0 0 1 28 18'/></g></svg>");
  background-size:16vw auto;
}

/* ---------- 全景描金回纹外框 ---------- */
body[data-theme="c"] .page-frame{
  position:absolute;inset:1.5vh .85vw;z-index:3;pointer-events:none;
  border:2px solid #e0ad48;
  box-shadow:0 0 34px #2a0305cc,inset 0 0 0 1px #8a4a0c99,inset 0 0 60px #00000055;
}
body[data-theme="c"] .fret{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><g fill='none' stroke='%23f3c96f' stroke-width='3' stroke-linecap='square'><path d='M5 35V5h30v30H15V15h10v10h-4v-6'/></g></svg>") 0 0/4.4vh 4.4vh repeat;
  opacity:.3;
  -webkit-mask-image:
    linear-gradient(180deg,#000 0 4.6%,#00000000 4.6%),
    linear-gradient(0deg,#000 0 4.6%,#00000000 4.6%),
    linear-gradient(90deg,#000 0 3.2%,#00000000 3.2%),
    linear-gradient(270deg,#000 0 3.2%,#00000000 3.2%);
  mask-image:
    linear-gradient(180deg,#000 0 4.6%,#00000000 4.6%),
    linear-gradient(0deg,#000 0 4.6%,#00000000 4.6%),
    linear-gradient(90deg,#000 0 3.2%,#00000000 3.2%),
    linear-gradient(270deg,#000 0 3.2%,#00000000 3.2%);
}

/* ---------- 左侧主视觉：新版猪将军（竖构图，人像居中偏左） ----------
   立绘自带火焰背景。这里让图直接顶满屏幕上下边（auto 100%），
   上下就不会出现生硬的横向接缝；只在右侧做渐隐，避免露出图的右边缘。 */
body[data-theme="c"] .hero{
  background:url('assets/hero-pig.jpg') left bottom / auto 100% no-repeat;
  mask-image:
    linear-gradient(90deg,#000 26%,#00000000 36%),
    linear-gradient(0deg,transparent 0%,#000 5%);
  mask-composite:intersect;
  -webkit-mask-image:
    linear-gradient(90deg,#000 26%,#00000000 36%),
    linear-gradient(0deg,transparent 0%,#000 5%);
  -webkit-mask-composite:source-in;
  filter:saturate(1.1) contrast(1.04);
}

/* ---------- 标题 ---------- */
body[data-theme="c"] .title h1{-webkit-text-stroke:.2vh #7a22093d}

/* ---------- 悬挂宫灯 ----------
   对称轴取「标题中心」而不是「屏幕中心」：标题是居中在
   --frame-left / --frame-right 之间的，而纸面本身就不在屏幕正中
   （左留白要给人物让位），所以按屏幕居中就会一左一右不对称。
   灯笼挂在纸面左右两条轴上 —— 那正好是标题中心 ± 半个纸面宽，天然对称。 */
body[data-theme="c"] .lantern{
  position:absolute;top:0;width:5.6vw;height:15vh;z-index:7;pointer-events:none;
  filter:drop-shadow(0 10px 26px #ff8a2e66);
  transform-origin:50% 0;
  animation:sway 5.5s ease-in-out infinite alternate;
}
/* 2.8vw = 灯笼自身宽度 5.6vw 的一半（让中心落在纸面边缘上）
   右灯笼用 alternate-reverse：相位与左边完全一致但旋转方向相反，
   任意时刻两只都是镜像关系（原来延迟 -2.4s 会让它们各摆各的，看着不对称）。 */
body[data-theme="c"] .lantern-l{left:calc(var(--frame-left) - 2.8vw)}
body[data-theme="c"] .lantern-r{right:calc(var(--frame-right) - 2.8vw);animation-direction:alternate-reverse}
@keyframes sway{
  0%{transform:rotate(-2.2deg)}
  100%{transform:rotate(2.2deg)}
}

/* ---------- 榜板文字：描金 ---------- */
body[data-theme="c"] .member-name{
  background:linear-gradient(178deg,#fff6d8 3%,#ffdd8f 30%,#d99a1f 58%,#ffeab4 84%,#fff8e2);
  -webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;
  filter:drop-shadow(0 3px 0 #6b1c07) drop-shadow(0 8px 20px #200203cc);
}
body[data-theme="c"] .rank-num{
  background:linear-gradient(178deg,#fff4cd,#ffca5c 40%,#b06a0c 72%,#ffe6a8);
  -webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;
  filter:drop-shadow(0 2px 0 #6b1c07) drop-shadow(0 6px 16px #20020399);
}
body[data-theme="c"] .member-amount{
  background:linear-gradient(178deg,#ffe9ae,#d28f11);
  -webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;
  filter:drop-shadow(0 2px 10px #22030499);
}

/* ---------- 榜板内部：描金内框 + 四角回纹 + 极淡水印 ---------- */
body[data-theme="c"] .paper-inner{inset:2.6vh 2.2vw}
body[data-theme="c"] .paper-inner::before{
  content:'';position:absolute;inset:-1.1vh -.9vw;pointer-events:none;
  border:1px solid #f0c46a5c;
  background:linear-gradient(90deg,#f0c46a24,#00000000 14%,#00000000 86%,#f0c46a24);
}
body[data-theme="c"] .paper-corner{
  position:absolute;width:5.4vh;height:5.4vh;z-index:3;pointer-events:none;
  border:2px solid #f0c46a4d;border-radius:2px;
}
body[data-theme="c"] .paper-corner.tl{top:2.2vh;left:1.4vw;border-right:0;border-bottom:0}
body[data-theme="c"] .paper-corner.tr{top:2.2vh;right:1.4vw;border-left:0;border-bottom:0}
body[data-theme="c"] .paper-corner.bl{bottom:2.2vh;left:1.4vw;border-right:0;border-top:0}
body[data-theme="c"] .paper-corner.br{bottom:2.2vh;right:1.4vw;border-left:0;border-top:0}
body[data-theme="c"] .paper-mark{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:76vh;height:76vh;z-index:1;pointer-events:none;opacity:.028;
}
body[data-theme="c"] .board-mode .board-row{
  border:0;border-radius:0;border-bottom:1px dashed #f0c46a3d;
}
body[data-theme="c"] .board-mode .board-row:last-child{border-bottom:0}
body[data-theme="c"] .board-mode .board-row.is-first{
  border-radius:.7vh;border-bottom-color:transparent;
  box-shadow:inset 0 0 0 1px #ffd58a5c,0 0 26px #ffb43f2b;
}

/* ---------- 卷轴上下祥云 ---------- */
body[data-theme="c"] .deco-top{
  position:absolute;left:50%;top:-7.2vh;transform:translateX(-50%);
  width:50vw;height:8.8vh;z-index:4;pointer-events:none;
  filter:drop-shadow(0 8px 18px #3d040799);
}
body[data-theme="c"] .deco-bottom{
  position:absolute;left:50%;bottom:-5.2vh;transform:translateX(-50%);
  width:56vw;height:10vh;z-index:4;pointer-events:none;
  filter:drop-shadow(0 -4px 18px #3d040799);
}

/* ---------- 隐藏主视觉（data.js 里 showHero:false）---------- */
body[data-theme="c"].no-hero .hero{display:none}
body[data-theme="c"].no-hero{--frame-left:12vw;--frame-right:12.5vw}


/* ---------- 窄窗兜底 ----------
   纸面窄到放不下「标题 + 两只灯笼 + 右上角全屏按钮」时，灯笼会压到标题字上，
   索性收起来（16:9 / 16:10 / 21:9 都亮着，比 4:3 还窄的窗口才会消失）。 */
@media(max-aspect-ratio:4/3){
  body[data-theme="c"] .lantern{display:none}
}

@media(max-aspect-ratio:1/1){
  /* 竖屏/方屏：立绘缩到 78% 高，--hero-w 要跟着变，--frame-left 才会跟着重算 */
  body[data-theme="c"]{--hero-w:calc(62.55vh * .78)}
  body[data-theme="c"] .hero{background-size:auto 78%}
}