/* door — 视口与地图同比例 1024/576；开门素材 1384×640 用 cover 裁切 */
#door{background:#03050a;overflow:hidden;cursor:pointer}
.doorwrap{position:absolute;inset:0;overflow:hidden;pointer-events:none}
#door .draw-frame,#door #doorDrawFrame{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  height:100%;width:auto;max-height:100%;max-width:100%;
  aspect-ratio:var(--door-frame-aspect,var(--gacha-frame-aspect));overflow:hidden;pointer-events:auto
}
.door-unit{position:absolute;inset:0;overflow:hidden}
.door-reveal{position:absolute;inset:0;z-index:1;overflow:hidden;background:#05080f}
.door-reveal-bg-img{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;object-position:center center;pointer-events:none}
.door-reveal-bg{position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse 48% 88% at 62% 50%,rgba(255,255,255,.16),transparent 62%),radial-gradient(circle at 60% 56%,rgba(180,195,220,.08),transparent 44%),linear-gradient(90deg,#05080f 0%,#070b12 28%,#0a0e16 100%)}
.doorwrap:has(.door-reveal-bg-img:not([hidden])) .door-reveal-bg{background:linear-gradient(90deg,rgba(5,8,15,.58) 0%,rgba(5,8,15,.2) 40%,rgba(5,8,15,.1) 62%,rgba(5,8,15,.24) 100%),linear-gradient(0deg,rgba(5,8,15,.38) 0%,transparent 24%,transparent 76%,rgba(5,8,15,.32) 100%)}
.door-reveal-stage{position:absolute;inset:0;z-index:2;width:100%;height:100%;min-height:0;min-width:0}
.door-info{position:absolute;left:0;top:0;bottom:0;z-index:4;width:42%;max-width:none;padding:clamp(32px,5.5vh,64px) clamp(12px,2vw,24px) 24px clamp(16px,2.8vw,36px);display:none;flex-direction:column;justify-content:center;opacity:0;pointer-events:none;box-sizing:border-box}
.door-info-body{opacity:0;transform:translate3d(-14px,0,0);transition:opacity .42s ease,transform .42s ease}
.doorwrap.is-door-info-early .door-info,.doorwrap.is-fx-phase-flash .door-info,.doorwrap.is-fx-phase-reveal .door-info{display:flex!important;opacity:1!important}
.doorwrap.is-door-info-early .door-info-body,.doorwrap.is-fx-phase-flash .door-info-body,.doorwrap.is-fx-phase-reveal .door-info-body{opacity:1;transform:none}
/* reveal：两栏 grid，避免立绘 640px  intrinsic 宽把整页挤偏 */
.doorwrap.is-fx-phase-reveal .door-reveal-stage,
.doorwrap.is-door-info-early .door-reveal-stage,
.doorwrap.is-fx-phase-flash .door-reveal-stage{
  position:absolute;inset:0;width:100%;height:100%;min-height:0;min-width:0;
  display:grid;grid-template-columns:42% minmax(0,1fr);grid-template-rows:minmax(0,1fr);align-items:stretch
}
.doorwrap.is-fx-phase-reveal .door-info,
.doorwrap.is-door-info-early .door-info,
.doorwrap.is-fx-phase-flash .door-info{
  position:relative;left:auto;top:auto;bottom:auto;width:100%;height:100%;min-width:0;grid-column:1;grid-row:1;z-index:5;
  justify-content:flex-start;align-items:stretch;align-content:start;
  padding:clamp(96px,22vh,168px) clamp(12px,2vw,24px) 24px clamp(16px,2.8vw,36px)
}
/* 立绘：全程同一张图；开门时在正中，闪光后向右滑到略偏右，高度铺满视口 */
.doorwrap.is-fx-mode .hero{
  position:absolute;inset:0;z-index:3;width:100%;height:100%;
  grid-column:unset;grid-row:unset;
  display:flex;align-items:flex-end;justify-content:center;
  padding:0;overflow:hidden;pointer-events:none
}
.doorwrap.is-fx-mode .hero .sil{
  width:auto;height:100%;max-height:100%;min-width:0;min-height:0;
  display:flex;align-items:flex-end;justify-content:center;
  overflow:hidden;
  transform:translate3d(0,0,0);
  transition:transform .92s cubic-bezier(.22,.92,.28,1)
}
.doorwrap.is-fx-mode .hero .sil.is-diy-framed{
  transform:translate3d(var(--diy-tx,0),var(--diy-ty,0),0) scale(var(--diy-scale,1));
  transform-origin:50% 100%
}
.doorwrap.is-fx-phase-flash .hero .sil:not(.is-diy-framed),
.doorwrap.is-door-info-early .hero .sil:not(.is-diy-framed),
.doorwrap.is-fx-phase-reveal .hero .sil:not(.is-diy-framed){
  transform:translate3d(10%,0,0)
}
.doorwrap.is-fx-phase-flash .hero .sil.is-diy-framed,
.doorwrap.is-door-info-early .hero .sil.is-diy-framed,
.doorwrap.is-fx-phase-reveal .hero .sil.is-diy-framed{
  transform:translate3d(calc(10% + var(--diy-tx,0)),var(--diy-ty,0),0) scale(var(--diy-scale,1));
  transform-origin:50% 100%
}
.doorwrap.is-fx-mode .hero-standing{
  display:block;height:100%;width:auto;max-height:100%;max-width:none;
  min-width:0;object-fit:contain;object-position:center bottom;
  filter:drop-shadow(0 0 22px rgba(255,255,255,.28));pointer-events:none
}
.door-info-head{display:flex;align-items:flex-end;gap:14px;margin-bottom:clamp(12px,2vh,20px)}
.door-portrait-wrap{position:relative;flex-shrink:0;overflow:visible}
.doorwrap.is-fx-phase-flash .door-info-head,
.doorwrap.is-door-info-early .door-info-head,
.doorwrap.is-fx-phase-reveal .door-info-head{transform:translateY(-14px);margin-bottom:calc(clamp(12px,2vh,20px) + 14px)}
.door-portrait{width:74px;height:90px;border:1px solid rgba(255,255,255,.22);background:#0c1018 center top/cover no-repeat;box-shadow:0 6px 20px rgba(0,0,0,.5)}
.doorwrap.is-fx-phase-flash .door-portrait,
.doorwrap.is-door-info-early .door-portrait,
.doorwrap.is-fx-phase-reveal .door-portrait{width:clamp(96px,14vw,112px);height:clamp(118px,17vw,138px)}
.door-contain-title{margin:0 0 8px;font-size:clamp(16px,3.8vw,26px);font-weight:800;letter-spacing:.22em;color:#eef4fc;text-shadow:0 2px 14px rgba(0,0,0,.55)}
.door-serial{margin:0 0 clamp(10px,1.6vh,16px);font-size:clamp(10px,2vw,12px);letter-spacing:.12em;color:rgba(205,222,245,.68)}
.doorwrap.is-fx-phase-flash .door-serial,
.doorwrap.is-door-info-early .door-serial,
.doorwrap.is-fx-phase-reveal .door-serial{font-size:clamp(8px,1.5vw,10px);letter-spacing:.1em;margin-bottom:clamp(8px,1.2vh,12px)}
.door-name-row{display:flex;align-items:flex-end;gap:10px;position:relative;flex-wrap:wrap;overflow:visible;min-height:clamp(32px,7vw,44px)}
.door-name-class{width:32px;height:32px;display:grid;place-items:center;border:1px solid rgba(108,152,188,.5);background:linear-gradient(180deg,#dceef8 0%,#b8d8ec 52%,#9ec6e0 100%);color:#10141c;font-size:11px;font-weight:900;box-sizing:border-box;flex-shrink:0}
.door-name-class.is-core-break{background:linear-gradient(180deg,#dceef8 0%,#c8dce8 34%,#e8a4ac 70%,#d07080 100%);border-color:rgba(190,130,140,.55)}
.door-name-class .class-icon{width:24px;height:24px}
.door-char-name{margin:0;font-size:clamp(22px,5vw,38px);font-weight:900;letter-spacing:.06em;color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.58);line-height:1.08}
.door-tier-badge{
  position:absolute;right:-6px;bottom:-6px;z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  opacity:0;visibility:hidden;
  transform:translate3d(0,-120px,0) scale(1.28) rotate(-10deg);
  transform-origin:50% 100%;
  pointer-events:none;will-change:transform,opacity,filter
}
.doorwrap.is-fx-phase-flash .door-tier-badge,
.doorwrap.is-door-info-early .door-tier-badge,
.doorwrap.is-fx-phase-reveal .door-tier-badge{right:-54px;bottom:-52px}
.door-tier-badge::before{
  content:"";position:absolute;inset:-18%;border-radius:50%;
  background:radial-gradient(circle,rgba(255,148,48,.28) 0%,rgba(255,108,32,.12) 42%,transparent 72%);
  opacity:0;transform:scale(.75);pointer-events:none
}
.door-tier-badge img{display:block;width:clamp(36px,8vw,48px);height:auto;object-fit:contain;position:relative;z-index:1}
.doorwrap.is-fx-phase-flash .door-tier-badge img,
.doorwrap.is-door-info-early .door-tier-badge img,
.doorwrap.is-fx-phase-reveal .door-tier-badge img{width:clamp(64px,14vw,88px)}
.door-tier-label{font-size:9px;letter-spacing:.18em;color:rgba(215,230,250,.52);white-space:nowrap;position:relative;z-index:1;line-height:1}
.doorwrap.is-tier-stamp .door-reveal,
.doorwrap.is-tier-stamp .door-reveal-stage,
.doorwrap.is-tier-stamp .door-info,
.doorwrap.is-tier-stamp .door-info-body,
.doorwrap.is-tier-stamp .door-portrait-wrap{overflow:visible!important}
.doorwrap.is-tier-stamp .door-tier-badge{visibility:visible;animation:doorTierSeal 1.12s cubic-bezier(.18,.92,.22,1) forwards}
.doorwrap.is-tier-stamp .door-tier-badge::before{animation:doorTierSealGlow 1.12s ease-out forwards}
@keyframes doorTierSeal{
  /* 起点 ≈ 旧起点与落点的中点（更靠左上），沿同对角线砸入 */
  0%{opacity:0;transform:translate3d(19vw,9vh,0) scale(6.2) rotate(-4deg);filter:blur(3px) brightness(1.38)}
  12%{opacity:.38;transform:translate3d(14vw,6vh,0) scale(4.4) rotate(-9deg);filter:blur(2px) brightness(1.24)}
  26%{opacity:.68;transform:translate3d(8vw,3.25vh,0) scale(2.75) rotate(-14deg);filter:blur(1px) brightness(1.14)}
  40%{opacity:.94;transform:translate3d(2.5vw,.9vh,0) scale(1.52) rotate(-17deg);filter:blur(0) brightness(1.07)}
  48%{opacity:1;transform:translate3d(.3vw,2px,0) scale(1.14) rotate(-19deg);filter:none}
  56%{transform:translate3d(-.9vw,-3px,0) scale(.84) rotate(-21deg)}
  66%{transform:translate3d(-.25vw,3px,0) scale(1.05) rotate(-20.5deg)}
  78%{transform:translate3d(.1vw,-2px,0) scale(.98) rotate(-20.2deg)}
  100%{opacity:1;transform:translate3d(0,0,0) scale(1) rotate(-20deg);filter:drop-shadow(0 0 14px rgba(255,180,60,.42)) drop-shadow(0 0 28px rgba(255,120,40,.22))}
}
@keyframes doorTierSealGlow{
  0%,20%{opacity:0;transform:scale(.35)}
  48%{opacity:.95;transform:scale(2.4)}
  58%{opacity:.88;transform:scale(1.35)}
  74%{opacity:.55;transform:scale(1.12)}
  100%{opacity:.28;transform:scale(1)}
}
.door-role-line{margin:clamp(8px,1.4vh,14px) 0 0;font-size:clamp(10px,2vw,12px);letter-spacing:.1em;color:rgba(200,218,240,.62)}
.door-fx-video,.door-fx-apng,.door-fx-flash{position:absolute;inset:0;pointer-events:none}
.door-fx-video,.door-fx-apng{z-index:9;width:100%;height:100%;object-fit:cover;object-position:center center;display:none;background:transparent}
.door-fx-flash{z-index:12;opacity:0;background:radial-gradient(circle at 50% 44%,rgba(255,255,255,.96),rgba(255,214,160,.42) 24%,rgba(255,120,80,.12) 42%,transparent 68%);mix-blend-mode:screen}
.door-tap-hint{
  position:absolute;z-index:20;left:50%;right:auto;top:auto;bottom:max(10px,calc(env(safe-area-inset-bottom,0px) + 8px));
  width:max-content;max-width:calc(100% - 32px);height:auto;margin:0;
  transform:translateX(-50%);text-align:center;white-space:nowrap;
  font-size:11px;letter-spacing:.16em;color:rgba(220,240,255,.45);pointer-events:none;
  animation:hintPulse 2s ease-in-out infinite
}
.doorwrap.is-fx-mode.is-preview .door-reveal{background:#05080f}
.doorwrap.is-fx-mode .hero,.doorwrap.is-fx-mode .hero .sil{opacity:1!important;visibility:visible!important}
.doorwrap.is-fx-mode[data-fx="webm"] .door-fx-video{display:block}
.doorwrap.is-fx-mode[data-fx="apng"] .door-fx-apng{display:block}
.doorwrap.is-fx-phase-flash .door-fx-video,.doorwrap.is-fx-phase-flash .door-fx-apng,.doorwrap.is-fx-phase-reveal .door-fx-video,.doorwrap.is-fx-phase-reveal .door-fx-apng{opacity:0;pointer-events:none}
.doorwrap.is-fx-phase-reveal .door-fx-video,.doorwrap.is-fx-phase-reveal .door-fx-apng{display:none!important}
.doorwrap.is-fx-phase-flash .door-fx-flash{animation:doorFxFlash .88s ease-out forwards}
.doorwrap.is-fx-phase-reveal .hero .sil{filter:drop-shadow(0 0 30px rgba(255,255,255,.58)) drop-shadow(0 0 18px rgba(255,176,53,.28));transition:filter .65s ease}
.doorwrap.is-fx-mode:not(.is-fx-loading) .hero,.doorwrap.is-fx-phase-reveal .hero{z-index:3}
@keyframes doorFxFlash{0%{opacity:0;transform:scale(.55)}20%{opacity:1;transform:scale(1.02)}100%{opacity:0;transform:scale(1.4)}}
.hero{position:absolute;inset:0;z-index:2;display:flex;align-items:flex-end;justify-content:flex-end;padding:0;pointer-events:none;overflow:hidden;transition:none}
.sil{position:relative;width:100%;height:100%;min-width:0;min-height:0;display:flex;align-items:flex-end;justify-content:flex-end;pointer-events:none;overflow:hidden}
.hero-standing{display:block;width:100%;height:100%;max-width:100%;max-height:100%;min-width:0;object-fit:contain;object-position:center bottom;flex:0 1 auto;filter:drop-shadow(0 0 22px rgba(255,255,255,.28));pointer-events:none}
.sil:not(.has-art) .hero-standing{display:none!important}
.sil:before{content:"";position:absolute;left:28%;top:1%;width:42%;height:19%;border-radius:50%;background:linear-gradient(160deg,#f5f8ff,#9a9ead)}.sil:after{content:"";position:absolute;left:16%;right:13%;top:16%;bottom:4%;clip-path:polygon(48% 0,64% 13%,66% 34%,90% 47%,73% 57%,85% 100%,48% 88%,12% 100%,24% 58%,1% 45%,30% 33%,33% 12%);background:linear-gradient(160deg,#f6f8ff 0 18%,#3d4351 19% 43%,#f2f5ff 44% 56%,#181b24 57% 100%)}
.sil.has-art:before,.sil.has-art:after{display:none}
.doorwrap.is-fx-phase-reveal .door-tap-hint:not([hidden]){display:block}

@media(min-width:761px){
  #door{background:#010204}
  #door .draw-frame,#door #doorDrawFrame{
    top:50%;left:50%;transform:translate(-50%,-50%);
    width:100%;height:auto;max-height:100%
  }
  .doorwrap.is-fx-phase-reveal .door-reveal-stage,
  .doorwrap.is-door-info-early .door-reveal-stage,
  .doorwrap.is-fx-phase-flash .door-reveal-stage{
    grid-template-columns:minmax(0,34%) minmax(0,1fr)
  }
  .door-info{width:34%}
  .doorwrap.is-fx-phase-reveal .door-info,
  .doorwrap.is-door-info-early .door-info,
  .doorwrap.is-fx-phase-flash .door-info{
    padding:clamp(88px,18vh,148px) clamp(12px,1.6vw,24px) 24px clamp(72px,11vw,148px)
  }
}
@media(max-width:760px){
  .doorwrap.is-fx-phase-reveal .door-reveal-stage,
  .doorwrap.is-door-info-early .door-reveal-stage,
  .doorwrap.is-fx-phase-flash .door-reveal-stage{grid-template-columns:46% minmax(0,1fr)}
  .door-info{padding:24px 10px 16px 12px}
  .doorwrap.is-fx-phase-flash .door-portrait,
  .doorwrap.is-door-info-early .door-portrait,
  .doorwrap.is-fx-phase-reveal .door-portrait{width:clamp(80px,18vw,96px);height:clamp(98px,22vw,118px)}
  .doorwrap.is-fx-phase-flash .door-tier-badge img,
  .doorwrap.is-door-info-early .door-tier-badge img,
  .doorwrap.is-fx-phase-reveal .door-tier-badge img{width:clamp(56px,15vw,76px)}
  .door-char-name{font-size:20px}
}
@media(orientation:landscape) and (max-height:520px){
  #door .draw-frame,#door #doorDrawFrame{top:50%;left:50%;transform:translate(-50%,-50%);width:auto;height:auto;min-width:100%;min-height:100%}
}