/* Author: goodjava@qq.com */
.paper:has(.relic-hero-select){width:min(1080px,96vw);max-width:1080px}
.relic-hero-select{display:grid;grid-template-columns:210px 1fr;gap:14px;margin:15px 0 20px}
.relic-hero-list{display:grid;gap:8px;padding:12px;background:#183b31;border:1px solid #a48d57;border-radius:9px}
.relic-hero-list .hero-pick{min-height:73px;height:73px;padding:5px 9px;gap:10px;border-radius:5px;background:#f4ebd6;color:#284335}
.relic-hero-list .hero-pick img{height:66px;width:44px;object-position:top;object-fit:cover}
.relic-hero-list .hero-pick b{font-size:17px}.relic-hero-list .hero-pick small{font-size:13px}
.relic-hero-list .hero-pick.selected{color:#ffedb4;background:#284b3b;border-color:#d6b76a;box-shadow:inset 0 0 0 1px #d6b76a}
.relic-hero-stage{position:relative;min-height:430px;border:1px solid #9a8654;border-radius:9px;overflow:hidden;background:#183b31 url('/art/environments/zhulin.png') center/cover}
.relic-hero-stage:after{content:'';position:absolute;inset:55% 0 0;background:linear-gradient(transparent,#102d25ed);pointer-events:none}
.relic-hero-portrait{position:absolute;left:8%;height:94%;bottom:0;width:56%;object-fit:contain;object-position:bottom}
.relic-hero-name{position:absolute;top:20px;right:18px;width:43%;padding:12px;color:#f7edcb;background:#173b31e8;border:1px solid #b09a66;border-radius:5px}
.relic-hero-name h3{color:#f7e5af;margin:0;font-size:20px}.relic-hero-name p{font-size:13px;line-height:1.7}.relic-hero-name small{font-size:11px}
.relic-starter{position:absolute;left:22px;right:22px;bottom:18px;z-index:1;display:grid;grid-template-columns:94px 1fr;gap:4px 16px;padding:15px 20px;background:#f5ecd5f5;border:1px solid #b69b5b;border-radius:8px;box-shadow:inset 0 0 0 3px #fff6df66,0 4px 14px #112e2550}
.relic-starter>img{width:94px;height:106px;object-fit:contain;grid-row:span 2;filter:drop-shadow(0 3px 2px #3b291f38)}
.relic-copy h3{margin:3px 0 5px;font-size:24px;color:#704426}.relic-copy p{margin:0;font-size:15px;line-height:1.65;color:#3d4b37}.relic-copy small{font-size:12px;color:#817252}
.relic-auto{justify-self:start;font-size:12px;letter-spacing:.08em;color:#fff6d5;background:#76866a;border-radius:3px;padding:3px 12px}
.relic-strip{position:fixed;top:72px;left:50%;transform:translateX(-50%);z-index:25;display:flex;align-items:center;gap:10px;max-width:min(570px,58vw);padding:5px 10px;border:1px solid #b29b60;border-radius:7px;background:#163b2fe8;color:#f6e6b6;box-shadow:inset 0 0 0 2px #e7ce8e13;isolation:isolate}
.relic-strip-label{font-size:12px;writing-mode:vertical-rl;letter-spacing:4px;opacity:.7}.relic-strip-items{display:flex;gap:5px;min-width:0}
.relic-token{position:relative;display:flex;align-items:center;gap:5px;padding:2px 5px;background:transparent;border:1px solid transparent;border-radius:5px;color:inherit;flex-shrink:0}
.relic-token>img{width:40px;height:43px;object-fit:contain}.relic-token>span:not(.relic-tooltip){display:grid;gap:3px}.relic-token b{font:15px 'Songti SC',serif}.relic-token small{justify-self:start;font-size:10px;border:1px solid #aa945e88;border-radius:10px;padding:1px 7px;color:#d9c898}
.relic-token:hover,.relic-token:focus-visible{border-color:#d8b75f;background:#ffffff0b}
.relic-tooltip{display:none;position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);width:210px;padding:15px;background:#f0e6cd;color:#334431;border:1px solid #b69b62;border-radius:5px;font-size:13px;line-height:1.8;box-shadow:0 6px 15px #0c251f44;pointer-events:none}
.relic-tooltip strong{display:block;color:#74462a;font-size:18px}.relic-token:hover .relic-tooltip,.relic-token:focus-visible .relic-tooltip{display:block}
.stage:has(.relic-strip) .wuxia-resources{top:138px}
.relic-guide{display:grid;gap:12px}.relic-guide article{display:grid;grid-template-columns:85px 1fr;column-gap:18px;align-items:center;padding:15px;border:1px solid #c1ad7b;border-radius:7px;background:#fff6df80}.relic-guide img{width:85px;height:95px;object-fit:contain;grid-row:span 2}.relic-guide article>small{font-size:11px;color:#847352}
.relic-feedback{position:fixed;left:50%;top:38%;transform:translateX(-50%);z-index:35;display:flex;align-items:center;gap:18px;max-width:min(440px,85vw);padding:18px 28px;color:#ffedba;background:#183b30ef;border:1px solid #d5b66d;border-radius:8px;pointer-events:none;animation:relic-notice 4.5s both}
.relic-feedback>img{width:78px;height:88px;object-fit:contain;filter:drop-shadow(0 0 9px #ffd06d88)}.relic-feedback span{display:grid;gap:7px}.relic-feedback b{font:22px 'Songti SC',serif}.relic-feedback strong{font-weight:400;font-size:16px;line-height:1.5}
.relic-triggered{animation:relic-glow 1.4s 2}
.lab-relics>div{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px 0}.lab-relics label{display:flex;gap:8px;align-items:center;border:1px solid #c4b58c;padding:8px;border-radius:5px}.lab-relics img{width:40px;height:44px;object-fit:contain}.lab-relics span{display:grid;gap:4px}.lab-relics small{font-size:11px;font-weight:normal}
@keyframes relic-glow{50%{border-color:#ebc46c;box-shadow:0 0 14px #f7d17b77}}
@keyframes relic-notice{0%{opacity:0;translate:0 10px}12%,75%{opacity:1;translate:0 0}100%{opacity:0;visibility:hidden}}
@media(max-width:1000px){.relic-hero-select{grid-template-columns:165px 1fr}.relic-hero-name{width:40%}.relic-hero-name h3{font-size:16px}.relic-strip{max-width:52vw}.relic-token b{font-size:12px}.relic-token>img{width:32px;height:37px}}
@media(max-width:700px){.relic-hero-select{display:block}.relic-hero-list{display:flex;gap:6px;padding:7px;overflow-x:auto;margin-bottom:9px}.relic-hero-list .hero-pick{display:grid;justify-items:center;gap:2px;min-width:64px;height:90px;min-height:90px;padding:3px}.relic-hero-list .hero-pick img{height:49px;width:38px}.relic-hero-list .hero-pick b{font-size:11px}.relic-hero-list .hero-pick small{display:none}.relic-hero-stage{min-height:340px}.relic-hero-portrait{left:0;width:67%}.relic-hero-name{top:10px;right:8px;width:43%;padding:8px}.relic-hero-name h3{font-size:14px}.relic-hero-name p{font-size:11px}.relic-hero-name small{font-size:9px}.relic-starter{left:10px;right:10px;bottom:10px;grid-template-columns:65px 1fr;gap:3px 10px;padding:10px}.relic-starter>img{width:65px;height:80px}.relic-copy h3{font-size:20px}.relic-copy p{font-size:12px}.relic-copy small{font-size:10px}.relic-auto{font-size:10px;padding:2px 8px}.relic-strip{top:39px;left:108px;transform:none;max-width:calc(100vw - 118px);gap:4px;padding:3px 5px}.relic-strip-items{max-width:calc(100vw - 148px);overflow-x:auto}.relic-token{gap:3px;padding:0 4px}.relic-token>img{width:27px;height:30px}.relic-token b{font-size:11px}.relic-token small{font-size:9px;padding:0 4px}.relic-strip-label{font-size:9px}.relic-tooltip{display:none!important}.stage:has(.relic-strip) .wuxia-resources{top:112px;font-size:10px}.relic-feedback{padding:12px 16px;gap:10px}.relic-feedback>img{width:54px;height:64px}.relic-feedback b{font-size:19px}.relic-feedback strong{font-size:13px}.lab-relics>div{grid-template-columns:1fr}}
@media(max-height:560px) and (min-width:701px){.relic-strip{top:8px;max-width:40vw}.stage:has(.relic-strip) .wuxia-resources{top:70px}.relic-feedback{top:24%;padding:8px 18px}.relic-feedback>img{height:48px}}
@media(prefers-reduced-motion:reduce){.relic-triggered{animation:none}.relic-feedback{animation:relic-notice 4.5s step-end}}

.stage.reference .relic-strip {
  box-sizing: border-box;
  left: calc(var(--player-vital-right) + 14px);
  top: var(--player-vital-center);
  transform: translateY(-50%);
  max-width: min(30vw, 360px);
  padding: 2px 5px;
  border-color: #b99f638f;
  border-radius: 19px;
  background: #18372de8;
}
.stage.reference .relic-strip-label { display: none; }
.stage.reference .relic-strip-items { gap: 2px; }
.stage.reference .relic-strip-items:has(.relic-token:nth-child(3)) {
  overflow-x: auto;
  scrollbar-width: thin;
}
.stage.reference .relic-token {
  gap: 6px;
  min-height: 32px;
  padding: 0 6px;
  border-radius: 14px;
}
.stage.reference .relic-token > img { width: 29px; height: 30px; }
.stage.reference .relic-token > span:not(.relic-tooltip) {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.stage.reference .relic-token b { font-size: 13px; }
.stage.reference .relic-token small { padding: 0 4px; font-size: 9px; }
.stage.reference .relic-token:not(:first-child) > img + span,
.stage.reference .relic-strip-items:has(.relic-token:nth-child(3)) .relic-tooltip { display: none; }

@media (min-width: 700px) and (max-height: 519px) {
  .stage.reference .relic-strip {
    left: var(--player-vital-left);
    top: calc(var(--player-vital-bottom) + 8px);
    transform: none;
  }
  .stage.reference .relic-token { min-height: 26px; }
  .stage.reference .relic-token > img { width: 24px; height: 25px; }
}
@media (max-width: 699px) {
  .stage.reference .relic-strip {
    left: auto;
    right: 2.5vw;
    top: 49px;
    transform: none;
    max-width: calc(97.5vw - var(--player-vital-right) - 8px);
    padding: 1px 4px;
  }
  .stage.reference .relic-token { min-height: 29px; gap: 4px; padding: 0 4px; }
  .stage.reference .relic-token > img { width: 24px; height: 25px; }
  .stage.reference .relic-token b { font-size: 11px; }
  .stage.reference .relic-token small { display: none; }
}

.stage:not(.cinematic) .relic-feedback{top:145px;padding:10px 22px}
.stage:not(.cinematic) .relic-feedback>img{width:52px;height:58px}
@media(max-width:700px){.stage:not(.cinematic) .relic-feedback{top:118px}}