/* ============ 3A 质感层（只改视觉，不改布局尺寸） ============ */
  :root{
    --ink:#070b14; --ink2:#0d1524;
    --gold:#d8b574; --gold-soft:rgba(216,181,116,.34);
    --cyan:#6fd3ff; --cyan-soft:rgba(111,211,255,.35);
    --txt:#e9f2ff; --sub:#8fa6c4;
    --panel:linear-gradient(165deg,rgba(22,30,48,.97),rgba(8,12,22,.99));
  }
  body{
    font-family:"Source Han Serif SC","Songti SC","Noto Serif CJK SC",serif;
    -webkit-font-smoothing:antialiased;
    background:radial-gradient(120% 80% at 50% -10%,#101a2c 0%,#070b14 55%);
  }
  /* 标题字：细金渐变 + 字距 */
  #title h1,.rttl{
    background:linear-gradient(180deg,#fff8e4 0%,#e8cd94 45%,#a97f3e 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
    letter-spacing:.26em;text-shadow:0 2px 24px rgba(216,181,116,.18);
  }
  /* 面板：玻璃 + 金线 + 顶部高光 + 深阴影 */
  .panel,.card,.hero,#cmd{
    position:relative;
    background:var(--panel);
    border:1px solid rgba(216,181,116,.28);
    box-shadow:
      inset 0 1px 0 rgba(255,240,210,.14),
      inset 0 0 0 1px rgba(255,255,255,.02),
      0 18px 46px rgba(0,0,0,.55);
    backdrop-filter:blur(6px);
  }
  /* 面板顶部一条渐隐金线 */
  .panel::before,.card::before,.hero::before,#cmd::before{
    content:"";position:absolute;left:12%;right:12%;top:0;height:1px;
    background:linear-gradient(90deg,rgba(216,181,116,0),rgba(240,214,160,.85),rgba(216,181,116,0));
    pointer-events:none;
  }
  /* 角色卡：左侧金色标线（选中态） */
  .card.active::after{
    content:"";position:absolute;left:0;top:14%;bottom:14%;width:2px;
    background:linear-gradient(180deg,rgba(216,181,116,0),var(--gold),rgba(216,181,116,0));
    box-shadow:0 0 12px rgba(216,181,116,.7);
  }
  /* 血条：内嵌刻度 + 顶端高光 */
  .bar{
    position:relative;border-radius:2px;
    box-shadow:inset 0 1px 3px rgba(0,0,0,.9),inset 0 0 0 1px rgba(255,255,255,.06);
    background-image:linear-gradient(90deg,rgba(255,255,255,.10) 1px,transparent 1px);
    background-size:25% 100%;
  }
  .bar i{position:relative;overflow:hidden;}
  .bar i::after{
    content:"";position:absolute;inset:0 0 auto 0;height:50%;
    background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,0));
    pointer-events:none;
  }
  /* 敌人血条同样加刻度 */
  .fhp,.ehp{background-image:linear-gradient(90deg,rgba(255,255,255,.10) 1px,transparent 1px);background-size:20% 100%;}
  /* 主按钮：金属渐变 + 描边 + 抬起阴影 */
  .btn{
    background:linear-gradient(180deg,#f6e3b4,#e0bd77 48%,#bd9350);
    color:#241703;font-weight:600;letter-spacing:.22em;
    box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 -1px 0 rgba(0,0,0,.25) inset,0 10px 26px rgba(0,0,0,.45);
    border:1px solid rgba(255,232,180,.55);
  }
  .btn.ghost{
    background:linear-gradient(180deg,rgba(28,38,58,.9),rgba(14,20,34,.95));
    color:#cfe2ff;border:1px solid rgba(150,190,240,.35);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 6px 18px rgba(0,0,0,.35);
  }
  /* 指令按钮：暗金属 + 左侧色条 */
  .cmdbtn{
    background:linear-gradient(180deg,rgba(38,50,76,.96),rgba(17,24,40,.98));
    border:1px solid rgba(150,180,230,.24);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 3px 10px rgba(0,0,0,.35);
  }
  /* 顶栏：细字距 + 金线分隔 */
  #topbar{
    border-bottom:1px solid rgba(216,181,116,.18);
    background:linear-gradient(180deg,rgba(6,10,18,.85),rgba(6,10,18,0));
    padding-bottom:6px;
  }
  #topbar .stage-name{letter-spacing:.16em;font-weight:600;}
  /* 敌人名字与标签：描边阴影提升可读性 */
  .fname,.fname *{text-shadow:0 1px 3px rgba(0,0,0,.95),0 0 10px rgba(0,0,0,.65);}
  .ftag{backdrop-filter:blur(2px);}
  /* 队伍面板顶部渐隐，聚焦画面 */
  #hud{
    background:linear-gradient(180deg,rgba(7,10,18,0),rgba(6,9,16,.92) 22%,rgba(4,6,12,.98));
    box-shadow:0 -10px 30px rgba(0,0,0,.45);
  }
  /* 立绘：柔光轮廓 */
  .portrait{filter:drop-shadow(0 12px 28px rgba(0,0,0,.7)) drop-shadow(0 0 22px rgba(111,211,255,.12));}
  /* 属性格：细金边 */
  .statcell{border:1px solid rgba(216,181,116,.18);background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));}
  /* 稀有度文字加微光 */
  .rar-legend{text-shadow:0 0 10px rgba(255,203,99,.45);}
  .rar-epic{text-shadow:0 0 9px rgba(192,140,255,.4);}

  /* ============ 3A 材质层 II：纹理 / 镶嵌 / 四角 ============ */
  .panel,.card,.hero,#cmd,.statcell,.drop,.gline{
    background-image:
      url("data:image/webp;base64,UklGRtABAABXRUJQVlA4TMMBAAAvL8ALEBcw//M//2LBFA+gq4CPANnZNqfKN5N/yMjqh6DB3YAN7+KH4Am6Iqbv6sqr+A92V72uer3iiP4H+7LX4jzyRVmFcnoa58lgXPxkzIg7rPVNajCLi+FmPRNVb6Oudyh8GTRudjAmmEWT1A6nURyM+ujzoiqk/C3wxP9X82XiCNLLCLpUWSA5BMHSaQAai2p0NwEjUjIr0Hp7RbpHw8UlZCI9Lo0sBf/Kppi0dW4GtWviEhDuGJho4ztuDB/gqS1gw1rKg10zd/UUUut3sBI6KakXbpUF81kajENOBkXNOScJrIddy4w/7viTQ2/mrBcErqiF2hu1UAkymm1onPVcp3pcwjrOh2W/jHC13F2bqWnHn/CRJ1U6rUDk/3bY0hCwZQvVrtwBcXiJlBC/zdvZSQPMK1BsN37RKqDBgMHQ07apfIHkwvMVlvDZ/oab3h8rYsAQ3Anln0UvNDnfq+7cBHcBl9lZJ/aEWsI9xsGqp9lLTpt+ta2uEqfqSOLEZiWh+SZ5n7eGVGQl3r5abQQSjDqknZ3Cun/1e2spipC/u2585z+7GK+zzOEV3/IJ1iwKuUHYgY6kJ1KuBZJminoMAA=="),
      linear-gradient(165deg,rgba(24,33,52,.97),rgba(8,12,22,.99));
    background-size:48px 48px, auto;
    background-blend-mode:overlay, normal;
  }
  .panel::after,#cmd::after,.card::after{
    content:"";position:absolute;inset:6px;pointer-events:none;border-radius:10px;
    background:
      linear-gradient(90deg,var(--gold),var(--gold)) left top/14px 1px no-repeat,
      linear-gradient(180deg,var(--gold),var(--gold)) left top/1px 14px no-repeat,
      linear-gradient(270deg,var(--gold),var(--gold)) right top/14px 1px no-repeat,
      linear-gradient(180deg,var(--gold),var(--gold)) right top/1px 14px no-repeat,
      linear-gradient(90deg,var(--gold),var(--gold)) left bottom/14px 1px no-repeat,
      linear-gradient(0deg,var(--gold),var(--gold)) left bottom/1px 14px no-repeat,
      linear-gradient(270deg,var(--gold),var(--gold)) right bottom/14px 1px no-repeat,
      linear-gradient(0deg,var(--gold),var(--gold)) right bottom/1px 14px no-repeat;
    opacity:.55;
  }
  .card .por,.hero img{
    box-shadow:
      0 0 0 1px rgba(0,0,0,.75),
      0 0 0 2px rgba(216,181,116,.75),
      0 0 0 3px rgba(0,0,0,.55),
      0 4px 14px rgba(0,0,0,.55);
  }
  .bar{
    height:9px;border-radius:3px;
    box-shadow:
      inset 0 0 0 1px rgba(0,0,0,.85),
      inset 0 0 0 2px rgba(255,255,255,.05),
      inset 0 2px 4px rgba(0,0,0,.85),
      0 1px 0 rgba(255,255,255,.06);
  }
  .bar i{box-shadow:inset 0 0 8px rgba(255,255,255,.22),0 0 10px rgba(120,255,190,.18);}
  .fhp,.ehp{box-shadow:inset 0 0 0 1px rgba(0,0,0,.8),inset 0 1px 3px rgba(0,0,0,.9),0 0 12px rgba(255,120,70,.12);}
  .opbtn{
    background:linear-gradient(180deg,rgba(60,80,116,.55),rgba(16,24,40,.75));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 2px 8px rgba(0,0,0,.45);
    border:1px solid rgba(150,190,240,.28);letter-spacing:.08em;
  }
  .opbtn.on{
    background:linear-gradient(180deg,rgba(90,150,210,.55),rgba(30,70,120,.8));
    border-color:rgba(160,220,255,.6);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 14px rgba(110,200,255,.35);
  }
  .ftag{
    background:linear-gradient(180deg,rgba(38,50,74,.92),rgba(14,20,34,.96));
    border:1px solid rgba(216,181,116,.35);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12);letter-spacing:.06em;
  }
  .ftarget{box-shadow:0 0 0 1px rgba(0,0,0,.5),0 0 14px rgba(255,190,80,.55);}
  .cmdbtn{
    position:relative;overflow:hidden;
    background-image:url("data:image/webp;base64,UklGRtABAABXRUJQVlA4TMMBAAAvL8ALEBcw//M//2LBFA+gq4CPANnZNqfKN5N/yMjqh6DB3YAN7+KH4Am6Iqbv6sqr+A92V72uer3iiP4H+7LX4jzyRVmFcnoa58lgXPxkzIg7rPVNajCLi+FmPRNVb6Oudyh8GTRudjAmmEWT1A6nURyM+ujzoiqk/C3wxP9X82XiCNLLCLpUWSA5BMHSaQAai2p0NwEjUjIr0Hp7RbpHw8UlZCI9Lo0sBf/Kppi0dW4GtWviEhDuGJho4ztuDB/gqS1gw1rKg10zd/UUUut3sBI6KakXbpUF81kajENOBkXNOScJrIddy4w/7viTQ2/mrBcErqiF2hu1UAkymm1onPVcp3pcwjrOh2W/jHC13F2bqWnHn/CRJ1U6rUDk/3bY0hCwZQvVrtwBcXiJlBC/zdvZSQPMK1BsN37RKqDBgMHQ07apfIHkwvMVlvDZ/oab3h8rYsAQ3Anln0UvNDnfq+7cBHcBl9lZJ/aEWsI9xsGqp9lLTpt+ta2uEqfqSOLEZiWh+SZ5n7eGVGQl3r5abQQSjDqknZ3Cun/1e2spipC/u2585z+7GK+zzOEV3/IJ1iwKuUHYgY6kJ1KuBZJminoMAA=="),linear-gradient(180deg,rgba(40,53,80,.96),rgba(16,23,38,.98));
    background-size:48px 48px, auto;background-blend-mode:overlay, normal;
  }
  .cmdbtn::before{
    content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
    background:currentColor;opacity:.55;
  }
  .overlay{backdrop-filter:blur(10px) saturate(.9);}
  .rline,.statcell .sv,.bnum{font-variant-numeric:tabular-nums;}

  /* ============ 3A 材质层 III：光效与立体 ============ */
  /* 血条：三段渐变 + 外发光 + 顶部高光条 */
  .bar{overflow:visible;}
  .bar i{
    border-radius:2px;
    background-image:linear-gradient(180deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.12) 32%,rgba(0,0,0,.18) 100%);
    background-blend-mode:overlay;
    box-shadow:inset 0 0 6px rgba(255,255,255,.35), 0 0 8px currentColor;
  }
  .bnum{font-weight:700;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.95),0 0 6px rgba(0,0,0,.6);letter-spacing:0;}
  .btag{font-weight:600;color:rgba(255,255,255,.5);}
  /* 敌人血条：更亮的内发光 */
  .fhp i,.ehp i{box-shadow:inset 0 0 6px rgba(255,255,255,.28),0 0 10px rgba(255,120,70,.3);}
  .fhpnum,.fhp .fhpnum{font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,1);}
  /* 技能按钮：金属三面 */
  .cmdbtn{
    border:1px solid rgba(160,190,235,.3);
    border-bottom-color:rgba(0,0,0,.65);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.22),
      inset 0 -4px 8px rgba(0,0,0,.35),
      0 4px 12px rgba(0,0,0,.45);
    background-image:linear-gradient(180deg,rgba(74,96,136,.95) 0%,rgba(40,53,80,.96) 42%,rgba(18,25,42,.98) 100%);
  }
  .cmdbtn b{color:#f2f7ff;text-shadow:0 1px 2px rgba(0,0,0,.8);letter-spacing:.05em;}
  .cmdbtn span{color:#a8bedc;text-shadow:0 1px 1px rgba(0,0,0,.7);}
  .cmdbtn:active{filter:brightness(1.25);}
  .cmdbtn.lb{
    background-image:linear-gradient(180deg,rgba(140,104,36,.95),rgba(72,50,14,.98));
    border-color:rgba(255,215,120,.75);
    box-shadow:inset 0 1px 0 rgba(255,235,170,.4),0 0 20px rgba(255,200,80,.35);
  }
  /* 主按钮：立体金属 */
  .btn{
    background:linear-gradient(180deg,#fdf0cd 0%,#e8c98b 44%,#b98f4d 100%);
    border-bottom:2px solid rgba(90,60,20,.7);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.85),
      inset 0 -3px 8px rgba(120,80,20,.25),
      0 10px 28px rgba(0,0,0,.5),
      0 0 24px rgba(230,190,110,.18);
  }
  /* 怪物接地阴影加强 */
  .eimgbox::after{
    height:22px;bottom:-18px;width:82%;
    background:radial-gradient(ellipse,rgba(0,0,0,.75),rgba(0,0,0,0) 72%);
  }
  /* 顶栏：菱形 + 细金线 */
  #topbar .stage-name{
    position:relative;padding-left:14px;color:#f0d9a8;
    text-shadow:0 1px 3px rgba(0,0,0,.9);
  }
  #topbar .stage-name::before{
    content:"";position:absolute;left:0;top:50%;width:6px;height:6px;
    transform:translateY(-50%) rotate(45deg);
    background:linear-gradient(135deg,#f7e3b0,#c39a52);
    box-shadow:0 0 8px rgba(230,190,110,.7);
  }
  /* 面板标题：上下细金线 */
  .rttl{padding-bottom:8px;position:relative;}
  .rttl::after{
    content:"";position:absolute;left:20%;right:20%;bottom:0;height:1px;
    background:linear-gradient(90deg,rgba(216,181,116,0),rgba(230,200,140,.7),rgba(216,181,116,0));
  }
  /* 详情属性值更醒目 */
  .statcell .sv{font-size:14px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.8);}
  .statcell .sk{letter-spacing:.08em;}

  /* ============ 首页 3A 化 ============ */
  #title{overflow:hidden;}
  #titleBg{position:absolute;inset:0;background-size:cover;background-position:center 32%;
    filter:blur(4px) brightness(.38) saturate(1.2);transform:scale(1.14);}
  #title .glow{position:absolute;inset:0;pointer-events:none;z-index:1;
    background:
      radial-gradient(46% 30% at 50% 26%,rgba(120,190,255,.16),rgba(0,0,0,0) 70%),
      radial-gradient(70% 40% at 50% 100%,rgba(255,180,90,.10),rgba(0,0,0,0) 72%);}
  #title .beam{position:absolute;inset:-10% -20%;pointer-events:none;z-index:1;
    background:linear-gradient(104deg,rgba(150,220,255,0) 38%,rgba(160,225,255,.075) 47%,rgba(150,220,255,0) 56%);}
  #title::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
    background:
      radial-gradient(70% 45% at 50% 30%,rgba(8,14,26,0) 0%,rgba(6,10,18,.55) 62%,rgba(4,7,14,.95) 100%),
      linear-gradient(180deg,rgba(4,7,14,.72) 0%,rgba(4,7,14,0) 26%,rgba(4,7,14,.86) 100%);}
  #title .tinner{position:relative;z-index:2;}
  #title h1{font-size:clamp(32px,9vw,48px);letter-spacing:.3em;
    filter:drop-shadow(0 6px 26px rgba(220,180,110,.35));}
  #title .sub{margin-top:10px;letter-spacing:.42em;color:#c8b184;opacity:.95;}
  #title .tdivider{width:min(240px,62vw);height:1px;margin:16px auto 4px;
    background:linear-gradient(90deg,rgba(216,181,116,0),rgba(240,214,160,.9),rgba(216,181,116,0));}
  #title .how{font-size:12.5px;line-height:2.1;color:#e2edfa;border:0;padding:0;
    max-width:min(330px,86vw);text-shadow:0 1px 4px rgba(0,0,0,.9);opacity:1;}
  #title .how b,#title .how em{color:#ffd98a;font-style:normal;}
  #title .lineup{margin:20px 0 6px;gap:10px;align-items:center;justify-content:center;}
  #title .lineup img{width:44px;height:44px;object-fit:cover;border-radius:50%;
    box-shadow:0 0 0 1px rgba(0,0,0,.8),0 0 0 2px rgba(216,181,116,.75),0 0 18px rgba(110,190,255,.18);
    filter:drop-shadow(0 6px 12px rgba(0,0,0,.7));opacity:.97;}
  #title .btn{min-width:214px;padding:15px 30px;font-size:16px;margin-top:10px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -3px 8px rgba(120,80,20,.25),
      0 12px 30px rgba(0,0,0,.55),0 0 34px rgba(255,200,110,.32);}
  #title .credit{margin-top:14px;font-size:8px;color:#4d5c74;opacity:.8;line-height:1.6;}

  /* ============ 编队页细节 ============ */
  .stagelist{
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 22px),transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 22px),transparent 100%);
  }
  .stageitem.lock{opacity:.58;}
  .stageitem.cur{box-shadow:0 0 0 1px rgba(255,215,140,.55),0 0 16px rgba(255,190,90,.25);}
  .hero .badge{display:block;font-size:8px;padding:1px 5px;border-radius:7px;
    color:#2a1a04;background:linear-gradient(180deg,#ffe9b0,#ffc44d);letter-spacing:.04em;}
  .hero .badge.wait{color:#9fb4d6;background:rgba(255,255,255,.08);border:1px solid rgba(150,190,240,.25);}

  /* ============ 结算 / 掉落 重构 ============ */
  .rw{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0 14px;}
  .rwcell{padding:12px 10px;border-radius:12px;text-align:center;
    background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
    border:1px solid rgba(216,181,116,.3);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 4px 14px rgba(0,0,0,.35);}
  .rwcell .k{font-size:10.5px;letter-spacing:.14em;color:#9fb4d6;margin-bottom:4px;}
  .rwcell .v{font-size:26px;font-weight:700;color:#fff;line-height:1.1;
    font-variant-numeric:tabular-nums;text-shadow:0 2px 10px rgba(255,210,130,.35);}
  .rwcell .u{font-size:9.5px;color:#d8b574;margin-top:3px;letter-spacing:.06em;}
  .clist{display:flex;flex-direction:column;gap:7px;margin-bottom:18px;text-align:left;}
  .crow{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#dce9fb;
    padding:9px 12px;border-radius:9px;background:rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.07);}
  .crow.dim{color:#8fa6c4;}
  .cdot{width:6px;height:6px;border-radius:50%;background:#7f93b3;flex:0 0 auto;}
  .cdot.gold{background:linear-gradient(180deg,#ffe6a8,#d8a444);box-shadow:0 0 8px rgba(255,200,110,.8);}
  .cdot.relic{background:linear-gradient(180deg,#ffd0a0,#ff8a4c);box-shadow:0 0 8px rgba(255,150,80,.8);}
  .cdot.book{background:linear-gradient(180deg,#bfe0ff,#5aa8ff);box-shadow:0 0 8px rgba(110,180,255,.8);}
  /* 掉落卡：大图标 + 稀有度光效 */
  .drops{gap:10px;}
  .dcard{padding:14px 12px;border-radius:14px;cursor:pointer;position:relative;overflow:hidden;
    background:linear-gradient(100deg,rgba(255,255,255,.05),rgba(255,255,255,.02));}
  .dcard .dico{width:54px;height:54px;margin-right:6px;}
  .dcard .dname{font-size:15px;letter-spacing:.05em;}
  .dcard .dmod{font-size:10.5px;letter-spacing:.02em;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .dcard .dmod.sub{color:#8fa6c4;}
  .dcard .dmod.attr{color:#cfe0f5;}
  .dcard .dslot{font-size:10px;color:#cfe4ff;border:1px solid rgba(150,200,255,.35);
    border-radius:9px;padding:3px 9px;background:rgba(120,180,255,.10);}
  .dcard.rar-legend{border-color:rgba(255,203,99,.8);
    box-shadow:inset 0 0 30px rgba(255,190,80,.16),0 0 22px rgba(255,190,80,.22);}
  .dcard.rar-legend::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(115deg,rgba(255,220,140,0) 35%,rgba(255,225,150,.18) 48%,rgba(255,220,140,0) 60%);}
  .dcard.rar-epic{border-color:rgba(192,140,255,.7);box-shadow:inset 0 0 26px rgba(170,110,255,.14);}
  .dcard.rar-rare{border-color:rgba(90,168,255,.6);}
  #drop .btn.ghost{min-width:0;padding:10px 18px;font-size:12.5px;opacity:1;
    border-color:rgba(150,200,255,.45);background:linear-gradient(180deg,rgba(28,38,58,.95),rgba(14,20,34,.98));}