/* 跟「抽奖」钮同一套皮：两个钮上下叠在左下角，长得不一样会很怪 */
#tsSkinFab{
  position:fixed;z-index:9990;box-sizing:border-box;
  display:none;align-items:center;justify-content:center;gap:4px;
  padding:0 8px;border:0;color:#fff;
  font-weight:700;letter-spacing:1px;line-height:1;white-space:nowrap;
  background:linear-gradient(180deg,#3d5cc9,#23307a);
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 2px 6px rgba(0,0,0,.35);
  pointer-events:auto;
}
#tsSkinFab .ico{display:flex;align-items:center;justify-content:center;width:1.1em;height:1.18em;flex:0 0 auto;}
#tsSkinFab .ico svg{display:block;width:100%;height:100%;}
#tsSkinBag{
  position:fixed;inset:0;z-index:2147483600;display:none;
  font-family:"PingFang SC","Microsoft YaHei",sans-serif;
}
#tsSkinBag.show{display:block;}
.tsb-mask{position:absolute;inset:0;background:rgba(2,6,16,.72);}
.tsb-panel{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(92vw,360px);padding:14px 14px 16px;border-radius:16px;
  color:#eef4ff;
  background:linear-gradient(180deg,#142445,#0b1630);
  box-shadow:0 18px 50px rgba(0,0,0,.55),0 0 0 1px rgba(255,206,90,.28);
}
.tsb-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.tsb-hd h3{margin:0;font-size:18px;letter-spacing:3px;color:#ffe1a0;}
.tsb-close{
  width:32px;height:32px;border:0;border-radius:16px;cursor:pointer;
  background:rgba(255,255,255,.08);color:#fff;font-size:20px;line-height:32px;
}
.tsb-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
}
.tsb-cell{
  position:relative;aspect-ratio:1;border:0;border-radius:12px;cursor:pointer;
  background:rgba(8,16,36,.9);
  box-shadow:inset 0 0 0 1px rgba(120,170,230,.22);
  overflow:hidden;padding:0;color:#dfe9ff;
}
.tsb-cell img,.tsb-cell .tsb-ph{
  width:100%;height:78%;object-fit:contain;display:block;background:rgba(6,12,28,.55);
}
.tsb-cell[data-id="default"] img{
  padding:8% 10% 2%;
  box-sizing:border-box;
  image-rendering:auto;
}
.tsb-cell .tsb-ph{
  display:flex;align-items:center;justify-content:center;
  font-size:13px;color:#9bb3d6;
}
.tsb-cell span{
  display:block;height:22%;line-height:2.1;font-size:12px;font-weight:800;
  text-align:center;background:rgba(10,20,44,.86);
}
/* 免伤率贴右上角，绝对定位不占布局，免得把原来的立绘+名字挤变形。
   数值由服务端下发，没拿到就是空串，:empty 时整个藏掉。 */
.tsb-cell .tsb-mit{
  position:absolute;right:4px;top:4px;padding:1px 5px;border-radius:8px;
  font-size:10px;font-style:normal;font-weight:700;line-height:1.6;
  color:#0a1428;background:linear-gradient(180deg,#ffe08a,#ffb43a);
  box-shadow:0 1px 4px rgba(0,0,0,.35);
}
.tsb-cell .tsb-mit:empty{display:none;}
/* 分红只标在赤炎/桃华/黑龙左边，晶翼朱鸾没有。跟右上免伤对称，不占格子布局。 */
.tsb-cell .tsb-div{
  position:absolute;left:4px;top:4px;padding:1px 5px;border-radius:8px;
  font-size:10px;font-style:normal;font-weight:700;line-height:1.6;
  color:#e8fff4;background:linear-gradient(180deg,#3ecf8e,#1a8f5c);
  box-shadow:0 1px 4px rgba(0,0,0,.35);
}
/* 有几个。只有合成会攒出重复款，1 个或没有时是空串、:empty 藏掉。
   贴在名字条上沿的右侧，避开右上的免伤和左上的分红。 */
.tsb-cell .tsb-cnt{
  position:absolute;right:4px;bottom:24%;padding:1px 6px;border-radius:8px;
  font-size:11px;font-style:normal;font-weight:800;line-height:1.6;
  color:#fff;background:linear-gradient(180deg,#8f7bff,#5b3fd6);
  box-shadow:0 1px 4px rgba(0,0,0,.4);
}
.tsb-cell .tsb-cnt:empty{display:none;}
.tsb-cell.locked .tsb-div{filter:grayscale(.35);opacity:.85;}
.tsb-cell.locked .tsb-mit{filter:grayscale(.35);opacity:.85;}
.tsb-cell.on{box-shadow:inset 0 0 0 2px #ffd24a,0 0 12px rgba(255,210,80,.35);}
.tsb-cell.locked img{filter:grayscale(1) brightness(.55);opacity:.7;}
.tsb-cell.locked span{color:#ffd24a;}
.tsb-cell.locked::before{
  content:"未解锁";position:absolute;left:0;right:0;top:32%;z-index:2;
  font-size:13px;font-weight:800;color:#ffe7a8;letter-spacing:1px;
  text-shadow:0 1px 4px #000;
  pointer-events:none;
}

#tsSkinBag.busy .tsb-grid{pointer-events:none;}
#tsSkinBag.busy .tsb-cell:not(.loading){opacity:.5;}
.tsb-cell.loading::before{
  content:"";position:absolute;inset:0;z-index:2;
  background:rgba(4,10,24,.6);
}
.tsb-cell.loading::after{
  content:"";position:absolute;z-index:3;
  left:50%;top:39%;width:26px;height:26px;margin:-13px 0 0 -13px;
  border-radius:50%;
  border:3px solid rgba(255,226,160,.25);
  border-top-color:#ffd24a;
  animation:tsbSpin .7s linear infinite;
}
@keyframes tsbSpin{to{transform:rotate(360deg);}}

#tsSalute{
  position:fixed;inset:0;z-index:2147483000;pointer-events:none;overflow:hidden;
}
#tsSalute i{
  position:absolute;display:block;border-radius:2px;
  opacity:0;transform:translate(0,0) rotate(0);
  animation:tsSaluteFly 1.35s ease-out forwards;
}
@keyframes tsSaluteFly{
  0%{opacity:1;transform:translate(0,0) rotate(0) scale(1);}
  70%{opacity:1;}
  100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--rot)) scale(.6);}
}