/* ==========================================================================
   Entrance Gadget CSS - v1.0.0 (Isolation Fix)
   ========================================================================== */

#eg-entrance-wrapper {
   position: fixed;
   inset: 0;
   z-index: 99999999;
   background: #000;
   display: flex;
   justify-content: center;
   align-items: center;
   perspective: 2000px;
   cursor: pointer;
   transition: opacity 1s;
}

.eg-fade-out {
   opacity: 0 !important;
   visibility: hidden !important;
}

/* --- Door Frame --- */
#eg-door-frame {
   position: relative;
   width: 35vw;
   height: 100vh;
   display: flex;
   transform-style: preserve-3d;
}

@media (max-width: 768px) {
   #eg-door-frame {
      width: 100vw;
   }
}

/* --- Base Door Style --- */
.eg-door {
   position: absolute;
   top: 0;
   height: 100%;
   transition: transform 2.5s cubic-bezier(0.4, 0, 0.2, 1);
   background-repeat: repeat;
   background-image: var(--eg-custom-texture);
   background-size: var(--eg-texture-size) var(--eg-texture-size);
   box-shadow: 0 0 50px rgba(0, 0, 0, 0.8);
   backface-visibility: hidden;
}

/* ==========================================
   SWING DOORS (Wood, Iron) - Isolated
   ========================================== */
/* 観音開き用：幅を50%に固定 */
.eg-type-wood .eg-door,
.eg-type-iron .eg-door {
   width: 50.3%;
}

.eg-type-wood .eg-door-left,
.eg-type-iron .eg-door-left {
   left: 0;
   transform-origin: left center;
}

.eg-type-wood .eg-door-right,
.eg-type-iron .eg-door-right {
   right: 0;
   transform-origin: right center;
}

/* --- Towards Back (Push) --- */
.eg-type-wood.eg-dir-back.eg-open .eg-door-left,
.eg-type-iron.eg-dir-back.eg-open .eg-door-left {
   transform: rotateY(110deg);
}

.eg-type-wood.eg-dir-back.eg-open .eg-door-right,
.eg-type-iron.eg-dir-back.eg-open .eg-door-right {
   transform: rotateY(-110deg);
}

/* --- Towards Front (Pull) --- */
.eg-type-wood.eg-dir-front.eg-open .eg-door-left,
.eg-type-iron.eg-dir-front.eg-open .eg-door-left {
   transform: rotateY(-110deg);
}

.eg-type-wood.eg-dir-front.eg-open .eg-door-right,
.eg-type-iron.eg-dir-front.eg-open .eg-door-right {
   transform: rotateY(110deg);
}

/* ==========================================
   SLIDE DOORS (Fusuma, Sci-Fi) - Isolated
   ========================================== */
/* 引き戸用：幅を100%に固定。他タイプには影響させない。 */
.eg-type-fusuma .eg-door-left,
.eg-type-scifi .eg-door-left {
   width: 100%;
   left: 0;
   transform: none;
}

.eg-type-fusuma .eg-door-right,
.eg-type-scifi .eg-door-right {
   display: none;
}

/* Slide Action - Only for Slider types */
.eg-type-fusuma.eg-slide-right.eg-open .eg-door-left,
.eg-type-scifi.eg-slide-right.eg-open .eg-door-left {
   transform: translateX(100%);
}

.eg-type-fusuma.eg-slide-left.eg-open .eg-door-left,
.eg-type-scifi.eg-slide-left.eg-open .eg-door-left {
   transform: translateX(-100%);
}

/* ==========================================
   Details & Decorations (Remains Same)
   ========================================== */
.eg-type-fusuma .eg-door {
   background-color: #faf9f6;
   border: 10px solid #2a1a0a;
}

.eg-type-fusuma.eg-slide-right .eg-door::after {
   left: 30px;
}

.eg-type-fusuma.eg-slide-left .eg-door::after {
   right: 30px;
}

.eg-type-fusuma .eg-door::after {
   content: '';
   position: absolute;
   top: 50%;
   width: 35px;
   height: 55px;
   background: #222;
   border-radius: 50%/40%;
   transform: translateY(-50%);
}

.eg-type-scifi .eg-door {
   border: 2px solid #00f2ff;
   box-shadow: inset 0 0 30px #00f2ff;
}

.eg-type-scifi.eg-slide-right .eg-door::before {
   left: 50px;
}

.eg-type-scifi.eg-slide-left .eg-door::before {
   right: 50px;
}

.eg-type-scifi .eg-door::before {
   content: 'ID SCAN';
   position: absolute;
   top: 45%;
   width: 80px;
   height: 50px;
   background: rgba(0, 20, 40, 0.8);
   border: 1px solid #00f2ff;
   color: #00f2ff;
   font: bold 10px monospace;
   display: flex;
   align-items: center;
   justify-content: center;
}

.eg-type-scifi .eg-door::after {
   content: '';
   position: absolute;
   inset: 0;
   height: 2px;
   background: #00f2ff;
   box-shadow: 0 0 15px #00f2ff;
   animation: eg-scanline 2s infinite linear;
}

.eg-type-wood .eg-door {
   border: 2px solid #3e1f07;
}

.eg-type-wood .eg-door::after {
   content: '';
   position: absolute;
   top: 50%;
   width: 28px;
   height: 28px;
   background: radial-gradient(circle at 30% 30%, #ffdf70, #d4af37);
   border-radius: 50%;
   transform: translateY(-50%);
}

.eg-type-wood .eg-door-left::after {
   right: 20px;
}

.eg-type-wood .eg-door-right::after {
   left: 20px;
}

.eg-type-iron .eg-door {
   border: 4px solid #111;
   background-blend-mode: multiply;
   background-color: #666;
}

.eg-type-iron .eg-door::after {
   content: '';
   position: absolute;
   top: 45%;
   width: 14px;
   height: 80px;
   background: linear-gradient(to bottom, #777, #333);
   border: 1px solid #000;
}

.eg-type-iron .eg-door-left::after {
   right: 20px;
}

.eg-type-iron .eg-door-right::after {
   left: 20px;
}

#eg-message-area {
   position: absolute;
   top: 35%;
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: 100;
   text-align: center;
   color: #fff;
   transition: opacity 0.8s;
}

#eg-message-bg-plate {
   position: absolute;
   inset: -20px -40px;
   background: rgba(0, 0, 0, 0.5);
   backdrop-filter: blur(8px);
   border-radius: 12px;
   z-index: -1;
   border: 1px solid rgba(255, 255, 255, 0.1);
}

#eg-message {
   font-size: 2.5rem;
   font-weight: bold;
   margin-bottom: 10px;
   text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

#eg-click-guide {
   animation: eg-pulse 2s infinite;
   letter-spacing: 2px;
   font-size: 0.9rem;
   opacity: 0.8;
}

@keyframes eg-pulse {

   0%,
   100% {
      opacity: 0.3;
   }

   50% {
      opacity: 1;
   }
}

@keyframes eg-scanline {
   0% {
      top: 0;
   }

   100% {
      top: 100%;
   }
}