/* ============================================
   ENTRANCE SCREEN STYLES
   ============================================ */

#screen-entrance {
  background: linear-gradient(160deg, #1a1208 0%, #2e1f0a 50%, #1a1208 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-xl);
  overflow: hidden;
}

/* Ambient light effect */
#screen-entrance::before {
  content: '';
  position: absolute;
  top: -30%;
  left: 50%;
  transform: translateX(-50%);
  width: 60vw;
  height: 60vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200,169,110,0.15) 0%, transparent 70%);
  pointer-events: none;
}

/* ── Store Sign ── */
.entrance-sign {
  text-align: center;
  color: var(--color-primary);
  position: relative;
  z-index: 1;
}

.entrance-sign .store-emoji {
  font-size: 3.5rem;
  display: block;
  margin-bottom: var(--space-sm);
  animation: float 3s ease-in-out infinite;
}

.entrance-sign h1 {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 0.02em;
  text-shadow: 0 2px 12px rgba(200,169,110,0.4);
  margin: 0;
}

.store-tagline {
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: #f4deb0;
  margin-top: var(--space-xs);
  letter-spacing: 0.08em;
  text-transform: none;
}

/* ── Door Container ── */
.door-container {
  position: relative;
  width: min(220px, 55vw);
  z-index: 1;
}

.door-frame {
  background: linear-gradient(180deg, #5c3a1e 0%, #3d2410 100%);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  padding: var(--space-md);
  box-shadow:
    inset 0 0 0 3px rgba(200,169,110,0.25),
    var(--shadow-lg),
    0 0 40px rgba(200,169,110,0.08);
  aspect-ratio: 0.55 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* Wood grain texture */
.door-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 18px,
    rgba(0,0,0,0.04) 18px,
    rgba(0,0,0,0.04) 19px
  );
  pointer-events: none;
}

.door-panels {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: var(--space-sm);
  width: 100%;
  height: 100%;
}

.door-panel {
  background: linear-gradient(135deg, #6b4423 0%, #4a2d14 100%);
  border-radius: var(--radius-sm);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    inset 0 -1px 0 rgba(0,0,0,0.2),
    0 2px 4px rgba(0,0,0,0.3);
}

.door-knob {
  position: absolute;
  left: var(--space-md);
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  background: radial-gradient(circle at 35% 35%, #f0d080, #c8a030);
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,0.5), 0 0 8px rgba(200,160,48,0.4);
}

/* Door open animation */
.door-frame.door-opening {
  animation: door-open 0.8s ease-in-out forwards;
  transform-origin: right center;
}

@keyframes door-open {
  0%   { transform: perspective(600px) rotateY(0deg); }
  100% { transform: perspective(600px) rotateY(-80deg); opacity: 0.3; }
}

/* ── Open Door Button ── */
.entrance-actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

.btn-open-door {
  padding: var(--space-md) var(--space-2xl);
  font-size: var(--font-size-lg);
  letter-spacing: 0.03em;
  position: relative;
  overflow: hidden;
}

/* Shimmer on button */
.btn-open-door::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -75%;
  width: 50%;
  height: 200%;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.2), transparent);
  transform: skewX(-20deg);
  animation: shimmer 2.5s infinite;
}

@keyframes shimmer {
  0%   { left: -75%; }
  100% { left: 150%; }
}

.entrance-hint {
  font-size: var(--font-size-xs);
  color: rgba(200,169,110,0.45);
}

/* ── Floating animation ── */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

/* ── Screen transition: entrance exits ── */
#screen-entrance.exiting {
  animation: screen-zoom-in 0.6s ease-in-out forwards;
}

@keyframes screen-zoom-in {
  0%   { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.12); }
}